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>
效果如下:
弧度区别不大可能看起来不明显,各位可以设置差别大一点
![[2024年]瞬间的收藏家优秀作文1200字](https://1200zi.500zi.com/uploadfile/img/2024/06/13/abe79d8b429dd5f8d494a80b6a0a3bef.jpg)
