CSS3圆角

来源：互联网发布：阿里巴巴一键铺货淘宝编辑：程序博客网时间：2024/05/16 06:52

圆角的优点

一是减少网站维护工作量。
二是提高了网站的性能，少了对图片的 HTTP 的请求，网页载入速度将变快；
三是增加视觉美观性。

（1）border-radius

含义是“边框半径”，指定一个值，就能同时设置四个圆角的半径（默认值为0，但不可以为负值）。

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>border-radius</title>    <style>        .div1{            width: 200px;            height: 50px;            border: 2px solid red;            border-radius: 25px;        }    </style></head><body><div class="div1"></div></body></html>

border-radius: 25px。
将每个圆角的”水平半径”和”垂直半径”都设置为25px。

###（2）border-radius（指定每个圆角）缺失参数的情况

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>border-radius 指定每个圆角</title>    <style>        .div1{            padding: 20px;            background: red;            width: 300px;            border-radius: 25px;        }        .div2{            padding: 20px;            background: yellow;            width: 300px;            border-radius: 15px 50px;        }        .div3{            padding: 20px;            background: pink;            width: 300px;            border-radius: 15px 50px 30px;        }        .div4{            padding: 20px;            background: green;            width: 300px;            border-radius: 15px 50px 30px 15px;        }    </style></head><body><div class="div1">一个值，四个圆角值相同</div><br/><div class="div2">两个值，第一个值为左上角和右下角，第二个值为右上角和左下角</div><br/><div class="div3">第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角</div><br/><div class="div4">第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角</div></body></html>

一个值：四个圆角值相同。
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角。
四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。

###（3）设置四个角

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        .div1{            border: 2px solid;            width: 200px;            background: red;            padding: 20px;            border-top-left-radius: 20px 35px;            border-top-right-radius: 20px;            /*border-bottom-left-radius: 20px;*/            /*border-bottom-right-radius: 20px;*/            /*border-radius: 20px;*/        }    </style></head><body><div class="div1"></div></body></html>

border-top-left-radius:
border-top-right-radius:
border-bottom-left-radius:
border-bottom-right-radius:
注意：属性的两个长度第一个值是水平半径，第二个是垂直半径。如果省略第二个值，它是从第一个复制。如果任一长度为零，角落里是方的，不圆润。

阅读全文

0 0