css3 圆角(border-radius)详解
在做网页的时候,常常需要实现圆角,以前的做法就是切图,现在就方便了,用css3里面的 border-radius 属性就可以直接实现。
border-radius 是一种缩写方法。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有下面几种情形出现:
四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角
两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角
一个值: 四个圆角值相同
使用 CSS3 border-radius 属性,可以给任何元素制作 "圆角"。背景颜色、边框、背景图片等
1. 指定背景颜色的元素圆角:
<style type="text/css">
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
<body>
<p id="rcorners1">圆角</p>
</body>
2. 指定边框的元素圆角:
<style type="text/css">
#rcorners1 {
border-radius: 25px;
border: 5px solid #55aaff;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
<body>
<p id="rcorners1">圆角</p>
</body>
3. 指定背景图片的元素圆角:
<style type="text/css">
#rcorners1 {
border-radius: 25px;
background: url(img1/i1.jpg) 200px/400px;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
<body>
<p id="rcorners1">圆角</p>
</body>
border-radius 可以指定每个圆角。根据四个值来设定
一、一个值
一个值的话和上面的案例一样,四个角都相同
二、两个值 - border-radius: 15px 50px;
俩个值的话就是斜对角相同
三、三个值 - border-radius: 15px 50px 90px;
第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角
四、四个值 - border-radius: 15px 50px 90px 5px;
第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。
总结:
圆角有很多优点
一是减少网站维护工作量;
二是提高了网站的性能,少了对图片的 HTTP 的请求,网页载入速度将变快;
三是增加视觉美观性。
编辑于 2020-09-03 17:12