首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

TDesign 更新周报(2022年10月第3周)

Shadow:新增示例页Button:统一不同尺寸,不同类型、不同交互态按钮,共计新增了1200+组件,且已应用图层与文本样式,可在 Overrides 修改按钮圆角半径了Swiper:新增轮播组件...Pagination:分页选择器样式更新Calendar:重构组件内容,应用独立边框样式,补全了缺少组件Message:补全缺少组件Anchor:重构组件,应用独立边框样式Breadcrumb:...Comment:去除冗余组件,添加自适应逻辑Collapse:去除冗余组件,添加自适应逻辑Tag: 重构组件,修复了元素间距与组件尺寸,新增不同类型组件Radio:修复字体样式与图层圆角半径错误问题,...新增不同类型组件Checkbox:修复字体样式与图层圆角半径错误问题,新增不同类型组件InputNumber:去除冗余组件,添加自适应逻辑,补全了缺少组件,新增不同类型组件Transfer:应用现有组件重构穿梭框组件...Dialog:修复圆角半径错误问题,补全缺少组件Notification:修复圆角半径错误问题,补全了缺少组件Popconfirm:修复箭头小三角显示错误问题Avatar:修复图层样式应用错误问题

1.1K40

【详细教程】HTML、CSS 和 JS 实现一个任务管理工具-ToDoList

,它被定位在屏幕中心,并且具有一个白色背景和10像素圆角边框。...输入框样式包括宽度、高度、字体、边框、内边距、字体颜色和字体粗细。当输入框被聚焦时,边框颜色会改变。提交按钮样式包括宽度、高度、字体、字体颜色、背景颜色、边框圆角和光标样式。...,用于设置其背景颜色、内边距、顶部外边距、边框半径、宽度和相对定位。...,用于设置其背景颜色、高度、下外边距、内边距、显示属性、对齐方式、边框半径边框样式和光标类型。...,用于设置其背景颜色、文本颜色、高度、宽度、边框半径边框样式、光标类型和轮廓样式。

1.3K50
您找到你想要的搜索结果了吗?
是的
没有找到

iOS编程101:如何创建圆形头像和圆角图片

layer对象提供了多种属性,使用它们来控制视图可视内容: 背景颜色 边框边框宽度 阴影颜色,宽度等 Opacity(不透明度) 圆角半径 Corner radius就是我们用来绘制圆角和圆形图像属性...所以上面的第一行是设置layer对象(CALayer类一个实例)圆角半径。将方形图像变成圆形图像,半径应设置为UIImageView宽度一半。例如,如果方形图像宽度是100像素。...在viewDidLoad:方法,在设置圆角半径代码后面加入以下两行代码: self.profileImageView.layer.borderWidth = 3.0f; self.profileImageView.layer.borderColor...再次编译并运行应用程序,您现在应该看到一个拥有白色边框头像。 创建圆角图片 你可以使用同样方法来创建圆角图像。关键是要改变圆角半径,并将其设置为其他值。...比如设置半径为10: self.profileImageView.layer.cornerRadius = 10.0f; 用户头像现在应该是圆角了。 ?

2.1K20

CSS魔法堂:重拾Border之——不仅仅是圆角

:一次过设置4个角椭圆半径 ?  从上图我们可以看到4个角分别对应4个独立椭圆形,而圆角正是4分之1个椭圆。 撸代码! ?...注意 margin/border/padding/content box相同方向椭圆圆心重叠; 当椭圆半径为0时,渲染为直角。...我们明明设置半径为100px,而且border box高度恰好也是100px,按理应该是足够,为何垂直半径结果值不是100px呢?  其实W3C Spec已经说得很清楚了!...通过直角边框找相交线  圆角边框是基于直角边框,这一点也体现在相邻边框相交线上。...延长相交线  由于圆角边框不像直角边框那样有棱有角,因此更难以分辨边框样式所对应边框。但只要我们沿直角边框相交线向图形内延伸,一切则清晰明了了。

1.3K50

border-radius熟悉写形状攻略

border-radius,国内翻译成圆角,你可能以为这个属性就是用来画圆角,没错,但是除此之外,它还可以做点别的事情。...radius其实指的是边框所在圆半径,这个CSS3属性不仅能够创建圆角,还可以创建椭圆角(如图下图第7),把这些角按照不同顺序和大小来展现,能够绘制成多种多样图形。...以下图例就是通过定义border-radius得到效果。 image.png 把这些基本图形进行组合,还可以描绘成不同图案,真的很棒。以下只是简单几个举例,更多图形,自己动手画吧。...仅border-radius就能实现这么丰富图案,如果再加上边框大小、渐变颜色和阴影等,将会添加更多质感。...image.png image.png 边框大小和外半径、内半径关系 实际半径相当于外半径减去相应边框大小。相减如果至少一个为为负值或零,则内半径为直角。

1.2K10

【CSS】盒子模型圆角边框 ( 通过设置 border-radius 样式设置圆角矩形圆角半径 )

- 在 CSS3 , 新加入了 圆角边框 样式 , 设置 border-radius: length; 属性 , 即可设置 盒子模型 圆角边框 ; border-radius 属性值取值 :...像素数值 : 设置一个 像素值 , 如 : 50px ; 百分比数值 : 设置一个 百分比数值 , 如 : 50% ; 在网页设计 , 大量用到了圆角边框 , 如 : 购物车上数字 : 购物车上浮动数字..., 使用了圆角边框 ; 圆角按钮 : 下图中 头像 以及 下面的两个 按钮 , 都是圆角边框 ; 二、代码示例 ---- 1、代码示例 - 正常矩形边框 默认情况下边框 , 是 矩形边框...如果 盒子模型 高度 = 宽度 , 并且 圆角矩形 圆角半径 为 50% 或者 高度/宽度 一半 , 则该圆角矩形 表现就是一个圆 ; 代码示例 : <!...= 宽度 , 并且 圆角矩形 圆角半径 为 高度 一半 , 则该圆角矩形 表现就是一个正常圆角矩形 , 左右两侧是圆角 ; 代码示例 : <!

2.2K20

在 Windows 11 处理 WindowChrome 圆角

Windows 11 使用 3 个级别的圆角,具体取决于要应用圆角 UI 组件及该组件相对于相邻元素排列方式。 圆角半径 使用情况 8px 窗体、Flyout 、弹出菜单等 。...也就是说在 Windows 11 上窗体需要应用半径为 8px 圆角。 2....DWMWCP_DONOTROUND 绝不对窗口采用圆角设置。 DWMWCP_ROUND 适当时采用圆角设置。 DWMWCP_ROUNDSMALL 适当时可采用半径较小圆角设置。...WPF 制作高性能透明背景异形窗口(使用 WindowChrome 而不要使用 AllowsTransparency=True) 另外,关于圆角我要抱怨一下: 在 Windows 11 ,我们对窗口边框进行了圆角处理...参考 在 Windows 11 桌面应用应用圆角 在 Windows 11 上,为增强应用功能而可以执行最常见 11 种操作 Windows 11 几何图形 6.

2.9K10

第93天:CSS3 边框详解

CSS3 边框详解 其中边框圆角边框阴影属性,应用十分广泛,兼容性也相对较好,具有符合渐进增强原则特征,我们需要重点掌握。...一、边框圆角  border-radius   每个角可以设置两个值 ,x 值,y值 圆角处理时,脑中要形成圆、圆心、横轴、纵轴概念,正圆是椭圆一种特殊情况。 ?...椭圆可分别设置长、短半径,以“/”进行分隔,遵循“1,2,3,4”规则,“/”前面的1~4个用来设置横轴半径(分别对应横轴1、2、3、4位置 ),“/”后面1~4个参数用来设置纵轴半径(分别对应纵轴1、...可以设置多重边框阴影,实现更好效果,增强立体感。...关于边框图片重点理解9宫格裁切及平铺方式,实际开发应用不广泛,但是如能灵活动用会给我们带来不少便利。

86640

前端网页制作秘密武器之盒模型边框

1 引言 盒模型是CSS一种基础设计模式,定义了Web页面元素是如何被看作盒子来解析,而每一个盒子又有不同展示方法接下来我们将详细介绍一下边框高级属性:圆角边框、图像边框。...2 .常用列表介绍 (1) 圆角边框 圆角边框可使页面看起来更加舒服,使板块显得圆润而不失灵活。...分别定义右上角、右下角左上角和左下角圆角。...语法说明 、分别定义圆角形状四分之一椭圆两个半径(每个参数允许设置1~4个参数值,对应4个派生子属性),第一个值表示圆角水平半径,第二个表示圆角垂直半径,两参数通过斜线分隔...注意:如果第二个值省略,则它等于第一个值,这时这个角就是一个四分之一圆角。如果任意一值为0,这个角则为矩形,不会是圆。值不能为负值。

1.1K10

CSS3-边框和背景

下述内容主要讲述了《HTML5权威指南》第19章关于“使用边框和背景”。 CSS3边框和样式得到了增强。例如:可以创建圆角边框,使用图像边框,为元素创建阴影。...创建圆角边框 可以使用边框radius特性创建圆角边框。...一对长度值或百分数值,百分数跟边框盒子宽度和高度相关 border-radius 一次设置四个角简写属性 一对或四对长度值或百分值,由/字符分割 指定两个半径值即可定义一个圆角,第一个值指定水平曲线半径...,第二个值指定垂直曲线半径。...轮廓有用地方在于短时间抓住用户对某个元素注意力,如必须按压按钮或是数据输入错误。 边框和轮廓最大区别是:轮廓不属于页面,因此应用轮廓不需要调整页面布局。

70620

CSS3-边框和背景

下述内容主要讲述了《HTML5权威指南》第19章关于“使用边框和背景”。 CSS3边框和样式得到了增强。例如:可以创建圆角边框,使用图像边框,为元素创建阴影。...创建圆角边框 可以使用边框radius特性创建圆角边框。...一对长度值或百分数值,百分数跟边框盒子宽度和高度相关 border-radius 一次设置四个角简写属性 一对或四对长度值或百分值,由/字符分割 指定两个半径值即可定义一个圆角,第一个值指定水平曲线半径...,第二个值指定垂直曲线半径。...轮廓有用地方在于短时间抓住用户对某个元素注意力,如必须按压按钮或是数据输入错误。 边框和轮廓最大区别是:轮廓不属于页面,因此应用轮廓不需要调整页面布局。

1.3K31

Android学习第一弹:Android通过用代码画虚线椭圆边框背景来学习一下shape用法

学习Shape用法 非著名程序员 在Android程序开发,我们经常会去用到Shape这个东西去定义各种各样形状,shape可以绘制矩形环形以及椭圆,所以只需要用椭圆即可,在使用时候将控件比如...imageview或textview高宽设置成一样就是正圆,solid表示远填充色,stroke则代表远边框线,所以两者结合可以实现带边缘圆,当然也可以直接加上size控制高宽。...width:边框宽度 dashWidth:虚线框宽度 dashGap:虚线框间隔 corners属性: radius:四个角半径 topRightRadius:右上角半径 bottomLeftRadius...:右下角半径 opLeftRadius:左上角半径 bottomRightRadius:左下角半径 gradient属性: startColor:其实颜色 centerColor:中间颜色...默认线性渐变,可以指定渐变为radial(径向渐变)或者sweep(类似雷达扫描形式) gradientRadius:渐变半径,径向渐变需指定半径

2K90

Android XML shape 标签使用详解(apk瘦身,减少内存好帮手)

--> 圆环 shape 可以定义边框属性   有边框,无边框,虚线边框,实线边框 shape 可以实现矩形圆角效果   可以指定其中一个角或者多个角设置圆角效果   指定圆角半径设置圆角大小...-- 圆角半径是高度一般就是一个圆弧了 --> <corners android:bottomLeftRadius="20dp" android:topLeftRadius...-- 圆角半径是高度一般就是一个圆弧了 --> 圆角矩形-左右两边都是半圆弧-带边框:rect_rounded_left_right_arc_border.xml...-- 圆角半径是高度一般就是一个圆弧了 --> 圆角矩形-圆:rect_rounded_arc.xml...-- 圆角半径是高度一般就是一个圆弧了 --> 渐变效果(以矩形为例) ?

2.4K70

CSS盒子模型

盒子模型 组成:边框、外边距、内边距、内容 边框(border):三部分组成“ 边框粗细、边框样式、边框颜色 ” 属性 作用 border-width 定义边框粗细,单位是px border-style...边框样式 solid(实线) dashed(虚线)dotted(点线) border-color 边框颜色 简写border:1px solid red;没有顺序!!!...表格细线边框:解决表格边框粗细叠加问题 border-collapse: collapse; 表示把相邻边框合并在一起 内边距(padding):设置内边距,即边框与内容之间距离 padding-left...加上这行代码可以去掉小圆点 圆角边框:把盒子变成圆角 border-radius: 10px; 通过设定radius(半径值来确定圆弧大小,用该半径圆去与盒子两条相邻边切 所以数值越大弧度越明显...要想要做出圆形盒子,先设置一个正方形盒子,在让半径等于边长一半 width: 200px; height: 200px; border-radius: 50%; 圆角矩形:把半径设为盒子高度一半

72630

前端 + AI —— 走进无码时代

组件样式计算 组件样式计算主要对边框圆角、背景三种常用样式分别计算。...3.1 圆角计算 在样式定义圆角被限制在矩形四个顶点处,圆角弧度取决于它半径,因此圆角计算主要目标就是识别圆角半径。 根据圆角4个方位,我们将组件区域划分为4块进行逐块分析。...具体步骤如下: 假设存在圆角,用面积推算圆角半径,确定“候选区域” 构造“候选区域”水平-竖直轴对称图形,对图形进行霍夫圆环检测,验证是否为圆角 3.1.1 圆角半径推算 我们假设存在圆角半径为R,如下图黄色色块区域...同时,黄色块也是以边长R为正方形与半径R为1/4圆差集,即s = R² - π × R² × ¼,于是联立方程,可求解圆角半径R,代码如下: 这一步我们根据面积差集计算出半径R,通过R,我们裁剪出“候选区域...对于边框计算,我们同样是先确定边框描述特征:A.

1.2K30

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券