CSS3的border-radius属性,最常见的也许是被用来画圆形,方法是设置一个正方形div之后,给它的border-radius属性设置50%的值。
今天对border-radius属性做一个扩展,首先看一下最基本的border-radius样式:
border-radius:水平值1 水平值2 水平值3 水平值4 / 垂直值1 垂直值2 垂直值3 垂直值4;
而且,为 border-radius 属性分别指定4、3、2、1 个由空格分隔的值时,这些值是以这样的规律分配到四个角上的(如下图):
当然也可以单独设置每个角的圆角值,如果不嫌麻烦的话:
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
老版本IE不支持圆角属性,可以参考这篇文章的解决办法:http://www.catswhocode.com/blog/10-ways-to-make-internet-explorer-act-like-a-modern-browser---
实例:
1.一个半椭圆
HTML代码:
<div class="example1"></div>
CSS代码:
.example1 {
width:200px;
height: 150px;
border-radius: 50% / 100% 100% 0 0;
background: #8BC34A;
}
2.不同水平和垂直半径的图形
HTML代码:
<div class="example2"></div>
CSS代码:
.example2 {
width:200px;
height: 200px;
border-radius:100px/70px;
background: red;
}
3.border 画的圆形
HTML代码:
<div class="example3"></div>
CSS代码:
.example {
width:0;
height:0;
border:100px solid gray;
border-radius:100px;
border-right-color:transparent;
}
好的,关于border-radius属性,先了解这么多吧。