一、使用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>
上述代码生成的就是一个宽高相等，边框为圆形，圆心位置在正中心的圆形边框。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/248922.html
微信扫一扫 
支付宝扫一扫 