CSS3 border-radius 属性
CSS3 border-radius 属性
CSS3 border-radius 属性定义一个元素的外边框的角的形状。可以用它来通过四个值设置边框的四个角的半径。
语法
border-radius: value;
值可以是一个或四个。
单值
设置单一值将应用于所有四个角：
border-radius: 10px;
四个值
border-radius: 10px 20px 30px 40px;
值按顺序表示顶部左侧，顶部右侧，底部右侧和底部左侧角的半径。
三个值
border-radius: 10px 20px 30px;
第一个值表示顶部左侧和顶部右侧，第二个值表示底部右侧和底部左侧，第三个表示底部右侧和底部左侧。
两个值
border-radius: 10px 20px;
第一个值表示顶部左侧和底部右侧，第二个值表示底部左侧和顶部右侧。
初始值
border-radius: 0;
过渡效果
border-radius 同样支持 CSS3 过渡效果，当 hover 时，圆角可以转变:
.box {
width: 100px;
height: 100px;
background: #edb200;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
border-radius: 10px; /* 优先使用圆角 */
}
.box:hover {
border-radius: 50px;
}
浏览器兼容性
导致问题的主要原因是老版的浏览器只识别"border-radius"这一个值,不能识别"-webkit-border-radius"这种带有浏览器前缀的写法。
.box {
width: 100px;
height: 100px;
background: #edb200;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
全局使用
Border-radius 也可以全局应用于所有圆角。这将会减少您在CSS中编写的代码量。 以下是一个通用类可以用于 border-radius 属性的值：
.round-corners {
border-radius: 5px;
}
最佳实践
- 当控件的宽度和高度成比例时，可以用交替圆角实现更好的效果。
.round-corners {
border-radius: 10px 5px 10px 5px;
}
- 如果要为容器应用圆角，还可以使用 CSS 伪元素实现。
.panel {
position: relative;
padding: 40px;
background: #ffffff;
border-radius: 20px;
}
.panel::before {
border-radius: 10px;
content: "";
position: absolute;
z-index: -1;
top: 5%;
bottom: 5%;
left: 5%;
right: 5%;
background: #dddddd;
}
结论
border-radius 是一个功能强大的 CSS3 属性，可以轻松地改变元素的外观。使用单个值、四个值、三个值或两个值创建圆角是很容易的。同时， border-radius 也支持过渡效果，使动态效果更加出色。它既有简单的用法，也有复杂的技巧，可以轻松地实现您所想要的效果。化繁为简的设计思想，是值得我们借鉴的。