border的边框默认是直角矩形的,很多网页的边框都是圆角的,看起来很圆滑,舒服了不少
其实方法特别简单,css中的一个border-radius属性就够了
这个属性是CSS 3支持的
属性值是圆角的半径,半径越大,圆角的成都越大
方法如下:
boder-top-left-radius：30px； //左上角
boder-top-right-radius：30px； //右上角
boder-bottom-left-radius：30px； //右下角
boder-bottom-right-radius：30px； //左下角
如果这四个弧度的圆角相同，可以写成：
border-radius：30px；
border-radius：赋值的数量可以设置很多种不同的
一个参数就是上边的四个圆角弧度相同
border-radius：30px；
两个参数则第一个参数作为左上角,右下角圆角半径,第二个作为右上,坐下圆角半径
border-radius：30px 20px；
三个参数分别是 左上 / 右上+左下 / 右下 角的圆角半径
border-radius：30px 20px 10px;
四个参数的顺序是左上 / 右上/ 右下 / 左下 的圆角半径(从左上开始顺时针)
border-radius： 40px 30px 20px 10px ;
我实验了一下4个参数的,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" charset="utf-8">
<style>
div {
width:200px;
height:100px;
border :2px solid red;
border-radius :40px 30px 20px 10px ;
}
</style>
</head>
<body>
<div/>
</body>
</html>效果如下:
弧度区别不大可能看起来不明显,各位可以设置差别大一点
