CSS3圆角效果

CSS3圆角效果

border-radius属性实现css3的圆角效果，border-radius属性是以下4种属性的简写：

1. border–top-left-radius（左上）
2. border-top-right-radius（右上）
3. border-bottom-right-radius（右下）
4. border-bottom-left-radius（左下）

border-radius的具体用法

1. border-radius直接写的方式

• 当border-radius的值只有1个时，代表4个方向的圆角值
• 当border-radius的值只有2个时，分别代表左上、右下，右上、左下的值
• 当border-radius的值只有3个时，代表左上，右上、左下，右下的值
• 当border-radius的值只有4个时，代表左上、右上、右下、左下的值

2. border-radius斜杠的方式
   border-radius:xxpx/xxpx（斜杠左边代表水平半径，斜杠右边代表垂直半径）

注意：斜杠左边只按照顺时针的方向写4个水平半径，斜杠右边只按照顺时针的方向也垂直半径

border-radius实现半圆和圆

1. 半圆

div{
	width: 100px;
	height: 50px;
	background-color: #333;
	border-radius: 50px 50px 0 0;
}
<div></div>

2. 圆

div{
	width: 100px;
	height: 100px;
	background-color: #333;
	border-radius: 50px;
}
<div></div>

参考文章：https://www.cnblogs.com/lfxiao/p/7234940.html

问题：简单描述一下css3圆角效果
知识点：border-radius属性