1.border-radius的基本语法:
1 border-radius:[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
它提供2组参数值:1水平参数(horizontal);2.垂直参数(vertical)。两组参数直接用左斜杠“/”隔开。每一组参数有4个参数值,遵循“上右下左”的简写规则。
/* 数值的取值范围:任意一个数值的最小值是0,最大值是对应边的边长 */
2.现在以完整输入2组共8个参数值的方式来对一个元素设置border-radius属性。
1 <style type="text/css"> 2 .box { 3 margin: 20px; 4 width: 200px; 5 height: 200px; 6 background-color: #000000; 7 border-radius: 100px 60px 40px 10px /20px 40px 60px 80px; 8 } 9 </style> 10
将看到以下效果图:
其中,horizontal表示水平参数(以下简称 h),vertical表示垂直参数(以下简称 v)。
属性设置与图中数值的对应关系:
100px 60px 40px 10px /20px 40px 60px 80px;
h_1, h_2, h_3, h_4, / v_1, v_2, v_3, v_4, ;
/* 而任意的一对参数值(h/v_n),都是一对半径值。如果两个值相等,则会切割出一个1/4圆,如果不相等,则会切割出一个1/4椭圆。 */
以上图的左上角为例:
1.以左上定点为起点,向左偏移 h_1=100,向下偏移 v_1=20,得到圆心 O。
2.然后以 r_1=h_1=100,r_2=v_1=20, 得到一个椭圆(红色区域)。
3.取1/4椭圆,覆盖元素的左上角的图形(绿色区域)。
椭圆中两个同心圆的半径的关系图:
其中:a 为大圆半径,b 为小圆半径。那么这个椭圆的1/4就相当于元素中一个角被切割成的形状。
3.以下是使用border-radius画出的图形:
1.正圆:
1 .box_1 { 2 width: 100px; 3 height: 100px; 4 background-color: #000000; 5 border-radius: 50px; 6 }
2. 1/4圆:
1 .box_2 { 2 width: 100px; 3 height: 100px; 4 background-color: #000000; 5 border-radius: 100px 0 0 0; 6 }
3. 1/2圆:
1 .box_3 { 2 width: 50px; 3 height: 100px; 4 background-color: #000000; 5 border-radius: 50px 0 0 50px; 6 }
4.椭圆:
.box_4 { width: 100px; height: 50px; background-color: #000000; border-radius: 50px/25px; }
5.鸡蛋型:
1 .box_5 { 2 width: 80px; 3 height: 110px; 4 background-color: #000000; 5 border-radius: 40px/70px 70px 40px 40px; 6 }
The end.
by Little