Hot For Coding
CSS3 border-radius 圆角

border-radius

在CSS3以前,要实现圆角大多使用图片,而在CSS3里实现圆角只要添加一个圆角属性border-radius即可实现,虽然部分浏览器不支持CSS3,但未来一定会向CSS3靠拢的。

div {
  width: 200px; 
  height: 50px;
  background: red; 
  border-radius: 10px;
}

以上代码里的border-radius就是实现圆角语句,值越大圆角越大,支持各种单位,多值方式,如四个值分别是上右下左。

div {
  width: 200px; 
  height: 50px;
  background: red; 
  border-radius: 10px 5px 0 15px;
}

如果要变成圆形,可以用百分比,比如:

div {
  width: 200px; 
  height: 50px;
  background: red; 
  border-radius: 50%;
}

border-radius目前已经成为W3C的标准,主流浏览器都已支持!

TITLE: CSS3 border-radius 圆角

LINK: https://www.qttc.net/2_css3_border_radius.html

NOTE: 转载内容请注明出处