1、圆形
示例:
思路：给任何正方形元素设置一个足够大的 border-radius ，就可以把它变成一个圆形.代码如下：
html:
|
1 |
<div class="size example1"></div> |
css:
|
1 2 3 4 5 6 7 8 |
.size{ width:200px; height: 200px; background: #8BC34A; } .example1{ border-radius:100px; } |
2、自适应椭圆
思路：border-radius 这个属性还有另外一个鲜为人知的真相，它不仅可以接受长度值，还可以接受百分比值。这个百分比值会基于元素的尺寸进行解析.这意味着相同的百分比可能会计算出不同的水平和垂直半径。代码如下：
html:
|
1 |
<div class="example3"></div> |
css:
|
1 2 3 4 5 6 |
.example3{ width:200px; height: 150px; border-radius:50%; background: #8BC34A; } |
3、自适应的半椭圆:沿横轴劈开的半椭圆
思路：border-radius 的语法比我们想像中灵活得多。你可能会惊讶地发现 border-radius 原来是一个简写属性。第一种方法就是使用它所对应的各个展开式属性：
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
我们甚至可以为所有四个角提供完全不同的水平和垂直半径，方法是在斜杠前指定 1~4 个值，在斜杠后指定另外 1~4 个值。举例来说，当 border-radius 的值为10px / 5px 20px 时，其效果相当于 10px 10px 10px 10px / 5px 20px 5px 20px 。
为 border-radius 属性分别指定4、3、2、1 个由空格分隔的值时，这些值是以这样的规律分配到四个角上的（请注意，对椭圆半径来说，斜杠前和斜杠后最多可以各有四个参数，这两组值是以同样的方法分配到各个角的）
代码如下：自适应的半椭圆:沿横轴劈开的半椭圆
html:
|
1 |
<div class="example4"></div> |
css:
|
1 2 3 4 5 6 |
.example4{ width:200px; height: 150px; border-radius: 50% / 100% 100% 0 0; background: #8BC34A; } |
4、自适应的半椭圆:沿纵轴劈开的半椭圆
思路：自适应的半椭圆:沿纵轴劈开的半椭圆
代码如下：
html:
|
1 |
<div class="example5"></div> |
css:
|
1 2 3 4 5 6 |
.example5{ width:200px; height: 150px; border-radius: 100% 0 0 100% / 50%; background: #8BC34A; } |
5、四分之一椭圆
思路：其中一个角的水平和垂直半径值都需要是100%，而其他三个角都不能设为圆角。
代码如下：
html:
