如何在CSS中实现圆角边框

一、使用border-radius属性

想要实现圆角边框，最常用的方法就是使用CSS的border-radius属性。该属性的语法如下：

border-radius:  |  /  | ;

其中， 和 分别代表圆角半径的长度和百分比。

举个例子：

上述代码就可以生成一个宽为200px，高为100px，边框宽度为2px，圆角半径为10px的圆角边框。

二、不规则圆角边框

有时候我们需要实现不规则的圆角边框，比如只对一个角进行圆角处理，或对某个角进行不同大小的圆角处理。这时候就可以利用border-radius的四个值来实现：

border-radius:    ;

举个例子：

上述代码分别实现了一个只对左上角进行圆角处理，和一个左上角和左下角都有圆角处理，但圆角半径不同的不规则圆角边框。

三、边框阴影实现圆角边框

除了使用border-radius属性，还可以使用CSS3的边框阴影box-shadow属性来实现圆角边框:

box-shadow: h-shadow v-shadow blur spread color inset;

其中，h-shadow和v-shadow表示阴影水平和垂直位置的偏移量，blur表示模糊程度，spread表示阴影的扩散程度，color表示阴影颜色，inset表示阴影内部。

举个例子：

上述代码生成的就是一个宽为200px，高为100px，边框宽度为10px，圆角半径为10px的圆角边框。

四、单边圆角边框

除了实现四个角的圆角边框，还可以实现单个边框的圆角，这时候就需要使用CSS3的伪元素:before或:after。

举个例子：

上述代码生成的就是一个只对左上角进行圆角处理的单边圆角边框。

五、实现圆形边框

最后还可以实现圆形边框，具体方法就是设置宽高相等，border-radius的值设置为50%。

上述代码生成的就是一个宽高相等，边框为圆形，圆心位置在正中心的圆形边框。