很多时候在开发网页前端的时候,为了让网页上面的东西看起来更加的舒服,我们可能需要设置一些圆角的效果,比如圆形的头像、圆角的 按钮等等。那么这些圆角效果是如何用css样式实现的?css3圆角怎么做?
在CSS3中,可以使用border-radius属性来设置边框的圆角样式。
border-radius属性是最常见 ,也是最简单、快速设置圆角效果的属性;border-radius(含义是"边框半径"),只需要给border-radius 提供值,就能设置边框圆角的半径。所有合法的CSS度量值都可以使用:em、ex、pt、px、百分比等等都可以。
border-radius包含5种设置圆角样式方式:border-radius :同时设置4个边框的圆角样式。
border-top-left-radius :设置左上角边框的圆角样式。
border-top-right-radius :设置右上角边框的圆角样式。
border-bottom-left-radius :设置左下角边框的圆角样式。
border-bottom-right-radius :设置右下角边框的圆角样式。
图片示例(设置四个边框圆角值为20px):
border-radius: 1-4 length|% / 1-4 length|%;
注意: 每个半径的四个值的顺序是:左上角,右上角,右下角,左下角。如果省略左下角,右上角是相同的。如果省略右下角,左上角是相同的。如果省略右上角,左上角是相同的。
border-radius的参数说明:
border-radius可以一次性对四个角设置相同的值,也可以对4个角分别设置圆角样式。而秘诀就在于设定border-radius的参数个数,border-radius的参数个数范围为1~4个。四个值:第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。
三个值:第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角
两个值:第一个值为左上角与右下角,第二个值为右上角与左下角
一个值:四个圆角值相同
以下为三个实例:
1、四个值 - border-radius: 15px 50px 30px 5px;
2、三个值 - border-radius: 15px 50px 30px;
3. 两个值 - border-radius: 15px 50px;
示例:
#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;
}
椭圆边框 - border-radius: 50px/15px:
椭圆边框 - border-radius: 15px/50px:
椭圆边框 - border-radius: 50%:
效果图: