[分享]css3圆角radius

CSS3的圆角属性（borderradius）是一个常用的样式属性，在网站设计中经常会用到。它可以让元素的角变成圆形或椭圆形，让页面看起来更加美观。borderradius属性可以设置四个值，分别对应...

CSS3的圆角属性（border-radius）是一个常用的样式属性，在网站设计中经常会用到。它可以让元素的角变成圆形或椭圆形，让页面看起来更加美观。

border-radius属性可以设置四个值，分别对应元素的四个角。如果只设置一个值，表示四个角都一样。如果设置两个值，分别对应左上/右下角和右上/左下角。如果设置三个值，分别对应左上角、右上角/左下角和右下角。如果四个值都设置了，按顺序依次对应左上角、右上角、右下角和左下角。

下面是一个设置元素为圆形的示例：

div {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* 将四个角都设置为50% */
} 

下面是一个设置元素为椭圆形的示例：

div {
  width: 150px;
  height: 100px;
  border-radius: 50% / 25%; /* 将左右两个角设置为50%，上下两个角设置为25% */
} 

需要注意的是，border-radius属性在IE8及以下版本浏览器不支持。可以使用以下代码进行兼容性处理：

div {
  width: 100px;
  height: 100px;
  -moz-border-radius: 50%; /* Firefox支持的圆角属性 */
  -webkit-border-radius: 50%; /* Safari和Chrome支持的圆角属性 */
  border-radius: 50%; /* 标准的圆角属性，不能省略 */
  behavior: url(border-radius.htc); /* IE浏览器支持的圆角属性，需要引入一个js文件 */
}