CSS3边框属性_圆角、CSS画基本图形（圆形、三角形、多边形、爱心、八卦等）

浏览数：197 / 时间：2015年06月09日

border-radius属性

　　说明：

　　　　设置或检索对象使用圆角边框。提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数　　　　省略，则默认等于第1个参数

　　水平半径：

　　　　如果提供四个参数值，将按上左、上右、下右、下左的顺序作用于四个角。

　　　　如果提供一个，将用于全部的于四个角。

　　　　如果提供两个，第一个用于上左、下右，第二个用于上右、下左。

　　　　如果提供三个，第一个用于上左，第二个用于上右、下左，第三个用于下右。

　　　　垂直半径也遵循以上4点。

　　　　对应的脚本特性为borderRadius。

　　取值：

　　　　<length>：用长度值设置对象的圆角半径长度。不允许负值

　　　　<percentage>：用百分比设置对象的圆角半径长度。不允许负值

border-top-left-radius属性

　　说明：

　　　　设置或检索对象的左上角圆角边框。

　　　　如设置border-top-left-radius:5px 10px;

　　　　表示top-left这个角的水平圆角半径为5px，垂直圆角半径为10px。

　　　　对应的脚本特性为borderTopLeftRadius。

　　取值：

　　　　<length>：用长度值设置对象的圆角半径长度。不允许负值

　　　　<percentage>：用百分比设置对象的圆角半径长度。不允许负值

border-top-right-radius属性

　　说明：

　　　　设置或检索对象的右上角圆角边框。

　　　　如设置border-top-right-radius:5px 10px;

　　　　表示top-right这个角的水平圆角半径为5px，垂直圆角半径为10px。

　　　　对应的脚本特性为borderTopRightRadius。

　　取值：

　　　　<length>：用长度值设置对象的圆角半径长度。不允许负值

　　　　<percentage>：用百分比设置对象的圆角半径长度。不允许负值

border-bottom-right-radius属性

　　说明：

　　　　设置或检索对象的左下角圆角边框

　　　　如设置border-bottom-right-radius:5px 10px;

　　　　表示bottom-right这个角的水平圆角半径为5px，垂直圆角半径为10px。

　　　　对应的脚本特性为borderBottomRightRadius

　　取值：

　　　　<length>：用长度值设置对象的圆角半径长度。不允许负值

　　　　<percentage>：用百分比设置对象的圆角半径长度。不允许负值

border-bottom-left-radius属性

　　说明：

　　　　设置或检索对象的左下角圆角边框。

　　　　如设置border-bottom-left-radius:5px 10px;

　　　　表示bottom-left这个角的水平圆角半径为5px，垂直圆角半径为10px。

　　　　对应的脚本特性为borderBottomLeftRadius。

　　取值：

　　　　<length>：用长度值设置对象的圆角半径长度。不允许负值

　　　　<percentage>：用百分比设置对象的圆角半径长度。不允许负值

实例：

圆角边框：

<style>
    div{
        width:180px;
        height:80px;
        border:2px solid red;
        padding:10px;
        border-radius:20px;
        /*设定一个值会同时设定四个角的圆角成都*/
        /*如果圆角的半径相同，每个值可以只写一个参数,相当于写2个一样的参数 例如 30px/30px 和30px 是等同的*/
    }
</style>
</head>
<body>
<div>
    圆角属性设定方法---圆角边框
</div>

<style>
div{
    width:180px;
    height:80px;
    border:2px solid red;
    padding:10px;
    border-radius:20px/20px 40px 80px;
    /*
        20px代表左上角
        40px代表右上角和左下角
        80px代表右下角
    */
}
</style>
</head>
<body>
<div>
    圆角属性设定方法---圆角边框
</div>

<style>
div{
    width:180px;
    height:80px;
    border:2px solid red;
    padding:10px;
    border-radius:20px 40px 80px 100px/20px 40px 80px 100px;
    /*
        20px 代表左上角的垂直半径
        40px 代表右上角的垂直半径
        80px 代表右下角的垂直半径
        100px 代表左下角的垂直半径
    */
    
    
    }
</style>
</head>
<body>
    <div>
        圆角属性设定方法---圆角边框
    </div>
</body>

半月：

<style>
    #yuan{
        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;
        /*备注：圆角的半径大于等于矩形半径，默认都是圆形的  本例中使用50px和100px效果相同*/
    }
</style>
</head>
<body>
<div id="yuan">
</div>
</body>

有一些需要用到CSS3的属性，所以在你打开这篇文章的时候，用的是firefox或者chrome，当然IE也能看一部分

1、正方形

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

2、长方形

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

3、圆形

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

4、椭圆

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

5、上三角

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;
}