CSS3圆角效果
border-radius属性实现css3的圆角效果,border-radius属性是以下4种属性的简写:
- border–top-left-radius(左上)
- border-top-right-radius(右上)
- border-bottom-right-radius(右下)
- border-bottom-left-radius(左下)
border-radius的具体用法
- border-radius直接写的方式
- 当border-radius的值只有1个时,代表4个方向的圆角值
- 当border-radius的值只有2个时,分别代表左上、右下,右上、左下的值
- 当border-radius的值只有3个时,代表左上,右上、左下,右下的值
- 当border-radius的值只有4个时,代表左上、右上、右下、左下的值
- border-radius斜杠的方式
border-radius:xxpx/xxpx(斜杠左边代表水平半径,斜杠右边代表垂直半径)
注意:斜杠左边只按照顺时针的方向写4个水平半径,斜杠右边只按照顺时针的方向也垂直半径
border-radius实现半圆和圆
- 半圆
div{
width: 100px;
height: 50px;
background-color: #333;
border-radius: 50px 50px 0 0;
}
<div></div>
- 圆
div{
width: 100px;
height: 100px;
background-color: #333;
border-radius: 50px;
}
<div></div>
参考文章:https://www.cnblogs.com/lfxiao/p/7234940.html
问题:简单描述一下css3圆角效果
知识点:border-radius属性