CSS圆角生成
效果预览
左上
右上
右下
左下
生成的CSS代码
border-radius: 10px 10px 10px 10px;元素设置
圆角参数设置
同步设置
css圆角生成工具介绍
- css圆角生成工具提供在线生成圆角的css代码的工具，可以输入四个方向的圆角数值查看效果并生成css代码
CSS3 border-radius 参数
- 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角
- 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
- 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
- 一个值： 四个圆角值相同
CSS3 圆角属性
| 属性 | 描述 |
|---|---|
| border-radius | 所有四个边角 border-*-*-radius 属性的缩写 |
| border-top-left-radius | 定义了左上角的弧度 |
| border-top-right-radius | 定义了右上角的弧度 |
| border-bottom-right-radius | 定义了右下角的弧度 |
| border-bottom-left-radius | 定义了左下角的弧度 |
说明
- border-radius:长度
- Firefox支持border-radius(圆角)：-moz-border-radius:2px;
- webkit内核的Safari和Chrome支持border-radius(圆角)：-webkit-border-radius:2px;
- Opera支持border-radius(圆角)：box-shadow:2px;
- 所有现代浏览器均已支持标准的border-radius属性
评论（可选）：