[分享]css3打出圆角

CSS中的圆角效果一直是设计师们喜欢使用的样式之一，能够让页面元素更加柔和和美观。在CSS3中，通过borderradius属性可以很方便地让我们实现圆角边框效果。borderradius属性支持如下...

CSS中的圆角效果一直是设计师们喜欢使用的样式之一，能够让页面元素更加柔和和美观。在CSS3中，通过border-radius属性可以很方便地让我们实现圆角边框效果。

border-radius属性支持如下几个值：

/* 圆角都相同 */
border-radius: 10px;

/* 分别指定左上、右上、右下、左下四个角的圆角大小 */
border-radius: 10px 5px 20px 5px;

/* 统一指定水平和垂直方向的椭圆半径 */
border-radius: 10px / 20px;

/* 分别指定水平和垂直方向的椭圆半径 */
border-radius: 10px 5px / 20px 30px; 

其中，圆角大小的单位可以使用px、em、%等；水平和垂直方向的椭圆半径只能是长度单位。

当然，border-radius属性不仅能够应用在边框上，也可以应用在元素的背景上。

/* 在背景上应用圆角效果 */
div {
  background-color: #f9f9f9;
  border-radius: 10px;
} 

总之，使用CSS3的border-radius属性，可以让我们轻松地实现圆角边框和圆角背景效果，让页面元素更加美观，降低视觉的凌厉度。