CSS3边框

CSS3边框

兼容性：

实例一：

实例二：（单独的设置四个角）左上角、右上角、右下角、左下角(顺时针顺序)

也可以单独的设置某个角：

       border-top-left-radius：10px;

　　 border-top-right-radius:20px;

　　 border-bottom-right-radius:30px;

　　 border-bottom-left-radius:40px;

圆角的实质：

实例三：（所以我们可以这样设置值滴呀）

同样的，我们可以设置两组值：border-radius: 100px 25px 80px 5px / 45px 25px 30px 15px;

实例四：（用它来直接画圆，其实就是四个半圆组成的）

实例五：（空心圆）

.radius{
    margin:40px auto;
    height:200px;
    width:200px;
    border:2px solid red;
    border-radius:100px;
    -o-border-radius:100px;

}

效果：

如果把border改成：border:2px dashed red; 那么就会出现虚心圆；

效果：

还有半圆：

.radius{
    margin:40px auto;
    color:white;
    height:200px;
    width:100px;
    background:black;
    border-radius:100px 0 0 100px;
    -o-border-radius:100px 0 0 100px;

}

效果：

四分一的圆：

.radius{
    margin:40px auto;
    color:white;
    height:200px;
    width:200px;
    background:black;
    border-radius:200px 0 0 0;
    -o-border-radius:200px 0 0 0;

}

效果：

ps：用这个方法来画圆（绘制图形），那可不划算呢；我们还有html中的canvas 和 svg 呢！

边框阴影；

实例四：

border-image:请看另外篇；