如何在CSS中实现圆角边框

一、使用border-radius属性

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

border-radius: <length> | <percentage> / <length> | <percentage>;

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

举个例子：

<style>
    .box {
        width: 200px;
        height: 100px;
        border: 2px solid #000;
        border-radius: 10px;
    }
</style>
<div class="box"></div>

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

二、不规则圆角边框

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

border-radius: <top-left-radius> <top-right-radius> <bottom-right-radius> <bottom-left-radius>;

举个例子：

<style>
    .box1 {
        width: 200px;
        height: 100px;
        border: 2px solid #000;
        border-radius: 0 20px 0 0;
    }
    .box2 {
        width: 200px;
        height: 100px;
        border: 2px solid #000;
        border-radius: 10px 0 0 10px;
    }
</style>
<div class="box1"></div>
<div class="box2"></div>

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

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

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

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

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

举个例子：

<style>
    .box {
        width: 200px;
        height: 100px;
        border: 2px solid transparent;
        box-shadow: 0 0 0 10px #000;
    }
</style>
<div class="box"></div>

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

四、单边圆角边框

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

举个例子：

<style>
    .box {
        width: 200px;
        height: 100px;
        border: 2px solid #000;
        position: relative;
    }
    .box:before {
        content: "";
        display: block;
        position: absolute;
        top: -2px;
        left: -2px;
        width: 20px;
        height: 20px;
        border: 2px solid #000;
        border-radius: 0 0 0 20px;
    }
</style>
<div class="box"></div>

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

五、实现圆形边框

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

<style>
    .box {
        width: 100px;
        height: 100px;
        border: 2px solid #000;
        border-radius: 50%;
    }
</style>
<div class="box"></div>

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