CSS border-radius - 指定每个角
border-radius属性可以包含一到四个值。以下是规则:
- 四个值 - border-radius:15px 50px 30px 5px; (第一个值适用于左上角,第二个值适用于右下角,第三个值适用于右下角,第四个值适用于左下角)
- 三个值 - border-radius:15px 50px 30px; (第一个值适用于左上角,第二个值适用于右上角和左下角,第三个值适用于右下角)
- 两个值 - border-radius:15px 50px; (第一个值适用于左上角和右下角,第二个值适用于右上角和左下角)
- 一个值 - border-radius:15px; (该值适用于所有四个角,它们均等地舍入
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners4 {
border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
尝试一下
您还可以创建椭圆角:
#rcorners1 {
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px / 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
尝试一下