使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角"。
一、减少网站维护量
二、提高网站性能 少了图片HTTp请求网页加载速度变快
三、增加视觉美观性
CSS3 圆角属性
属性 | 描述 |
所有四个边角 border-*-*-radius 属性的缩写 | |
定义了左上角的弧度 | |
定义了右上角的弧度 | |
定义了右下角的弧度 | |
定义了左下角的弧度 |
border-radius变宽的半径,指定一个值,就能同时设置四个边 默认为0 但不可以为负数
#div1{
width: 200px;
height: 50px;
border: 2px solid pink;
border-radius: 25px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#rcorners1{
width: 200px;
height: 50px;
background: #8AC007;
border: 2px solid palegreen;
border-radius: 25px;
text-align: center;
}
#rcorners4 {
border-radius: 15px 50px 30px 5px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners5 {
border-radius: 15px 50px 30px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners6 {
border-radius: 15px 50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners7 {
border-radius: 50px/15px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners8 {
border-radius: 15px/50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners9 {
border-radius: 50%;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p id="rcorners1">四个角相同</p>
<p id="rcorners7">椭圆边框 - border-radius: 50px/15px:</p>
<p id="rcorners8">椭圆边框 - border-radius: 15px/50px:</p>
<p id="rcorners9">椭圆边框 - border-radius: 50%:</p>
<p id="rcorners4">四个值 - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners5">三个值 - border-radius: 15px 50px 30px:</p>
<p id="rcorners6">两个值 - border-radius: 15px 50px:</p>
</body>
</html>
注意:属性的两个长度第一个是水平半径,第二个是垂直半径,如果第二值省略,它从第二个复制,