CSS3利用border-radius实现边框圆角
2014-01-08 23:40
731 查看
1、border-radius只有一个取值时，四个角具有相同的圆角设置，其效果是一致的：
效果：
2、border-radius设置两个值，此时top-left等于bottom-right并且他们取第一个值；top-right等于bottom-left并且他们取第二个值，也就是说元素 左上角和右下角相同，右上角和左下角相同
等价于：
效果：
3、border-radius设置三个值，此时top-left取第一个值，top-right等于bottom-left并且他们取第二个值，bottom-right取第三个值：
效果：
2、border-radius设置两个值，此时top-left等于bottom-right并且他们取第一个值；top-right等于bottom-left并且他们取第二个值，也就是说元素 左上角和右下角相同，右上角和左下角相同
等价于：
效果：
3、border-radius设置三个值，此时top-left取第一个值，top-right等于bottom-left并且他们取第二个值，bottom-right取第三个值：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML文本框 圆角显示 样式设置方法
- ie浏览器对border-radius属性的支持小结
- 图片transform其父级的border-radius失效
- css3学习笔记1
- css3(border-radius) 边框圆角详解
- weex image border-radius 圆角无效
- 个人简介 - HTML/CSS简单页面实例
- 登陆界面一个简约的模板及问题注意事项
- 利用CSS写一个底部弧度效果
- CSS圆形
- 使用纯CSS3创建一个纺锤形分隔线
- border-radius画企鹅
- css3深入理解之border-radius
- 与border相关被遗漏的属性及图标制作
- CSS3之border-radius半弧展示
- CSS3:border-radius隐藏的威力
- CSS3属性之：border-radius
- CSS3属性之border-radius
- 绘制各种图形
- -webkit-border-radius border-radius -webkit-box-shadow的意思