CSS3_边框属性之圆角的基本图形案例

一、正方形

div{ background:#F00; width:100px; height:100px;}

 

 

 

 

二、长方形

div{background:#F00;width:200px;height:100px;}

 

 

 

三、圆形

　　把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半。

div{width: 100px;height: 100px;background: red;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;}

 

 

四、半圆

 div{width:96px;height:48px;border-top:2px solid red;border-right:2px solid red;border-bottom:50px solid red;/*重点在这里*/border-left:2px solid red; border-radius:100px;}

 

 

 

五、椭圆

div{width: 200px;height: 100px;background: red;-moz-border-radius: 100px / 50px;-webkit-border-radius: 100px / 50px;border-radius: 100px / 50px;}

 

 

 

六、上三角

div{ width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;}

 

 

 

6、正方形

 

7、正方形

8、正方形

9、正方形

10、正方形

11、正方形

12、正方形

 

13、正方形

14、正方形

15、正方形

16、正方形

17、正方形

18、正方形

 

19、正方形

20、正方形

21、正方形

22、正方形

23、正方形

 

 

24、正方形

 

25、正方形

26、8角星

 

div {
    background: red;
    width: 80px;
    height: 80px;
    position: relative;
    text-align: center;
    -webkit-transform: rotate(20deg);
       -moz-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
         -o-transform: rotate(20eg);
            transform: rotate(20deg);
}
div:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: red;
    -webkit-transform: rotate(135deg);
       -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
         -o-transform: rotate(135deg);
            transform: rotate(135deg);
}

 

 

27、钻石

div{
    border-style: solid;
    border-color: transparent transparent red transparent;
    border-width: 0 25px 25px 25px;
    height: 0;
    width: 50px;
    position: relative;
    margin: 20px 0 50px 0;
}
div:after {
    content: "";
    position: absolute;
    top: 25px;
    left: -25px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: red transparent transparent transparent;
    border-width: 70px 50px 0 50px;
}

 

 

28、阴阳八卦

div {
    width: 96px;
    height: 48px;
    background: #eee;
    border-color: #000;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
}
 
div:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #eee;
    border: 18px solid #000;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}
 
div:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #000;
    border: 18px solid #eee;
    border-radius:100%;
    width: 12px;
    height: 12px;
}