用border-radius做圆和奥运五环的的效果

2014年5月26日 MK CSS 2 阅读 3665次

语法：
border-radius: 1-4 length|% / 1-4 length|%;
相关属性： border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius

注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。

取值：
length：
由浮点数字和单位标识符组成的长度值。不可为负值。
border-top-left-radius：
由浮点数字和单位标识符组成的长度值。不可为负值。
说明：
第一个值是水平半径。
如果第二个值省略，则它等于第一个值，这时这个角就是一个四分之一圆角。
如果任意一个值为0，则这个角是矩形，不会是圆的。
值不允许是负值。

radius，就是半径的意思。用这个属性可以很容易做出圆角效果，当然，也可以做出圆形效果。原理很简单，“正方形的内切圆的半径等于正方形边长的一半”。下面就做一个红色的圆。

代码预览

<html>
    <head>
        <meta charset="utf-8"/>
        <title>CSS3的border-radius属性</title>
        <style>
        .circle {
            background-color:#f00;
            width: 600px;   /* div的宽和高为600px即正方形的边长为600px */
            height: 600px;
            text-align: center;
            -moz-border-radius: 300px;   /* 圆的半径为边长的一半，即300px */
            -webkit-border-radius: 300px;
            border-radius: 300px;
            display: -moz-box;
            display: -webkit-box;
            display: box;
            -moz-box-orient: horizontal;
            -webkit-box-orient: horizontal;
            box-orient: horizontal;
            -moz-box-pack: center;
            -moz-box-align: center;
            -webkit-box-pack: center;
            -webkit-box-align: center;
            box-pack: center;
            box-align: center;
            font:normal 80px/100% Arial;
            text-shadow:1px 1px 1px #000;
            color:#fff;
        }
       </style>
    </head>
    <body>
        <div class="circle">
           Hello,World!
        </div>
    </body>
</html>

接下来用这个属性做一个奥运五环，与前面不同的是，圆环是有边的厚度的，这里用的是相对单位em。

代码预览

<html>
    <head>
        <meta charset="UTF-8" />
        <title>The Olympic Flag</title>
        <style type="text/css" media="screen">
        body {
            margin:20px;
            background-color:#efefef;
        }
        ul.flag {
            list-style-type:none;
            position: relative;
            margin: 20px auto;
        }
        .flag li, .flag li:before, .flag li:after {
            -webkit-border-radius: 6em;
            -moz-border-radius: 6em;
            border-radius: 6em;
            position: absolute;
        }
        .flag li {
            width: 12em;
            height: 12em;
            left: 0;
            top: 0;
            font-size: 1em;
        }
        .flag li:after {
            display: block;
            content: "";
            top: -0.1em;
            left: -0.1em;
            right: -0.1em;
            bottom: -0.1em;
            border: solid 1.4em black;
        }
        .flag .blue   { z-index: 10; left: 0; top: 0; }
        .flag .yellow { z-index: 20; left: 6.8em;  top: 5.7em; }
        .flag .black  { z-index: 21; left: 13.6em; top: 0; }
        .flag .green  { z-index: 20; left: 20.4em; top: 5.7em; }
        .flag .red    { z-index: 10; left: 27.2em; top: 0px; }
        .flag .blue:after   { border-color: blue; }
        .flag .yellow:after { border-color: yellow; }
        .flag .black:after  { border-color: black; }
        .flag .green:after  { border-color: green; }
        .flag .red:after    { border-color: red; }
        /* 蓝色压住黄色 */
        .flag .blue.alt { z-index: 24; }
        .flag .blue.alt,
        .flag .blue.alt:before,
        .flag .blue.alt:after {
            border-top-color: transparent;
            border-left-color: transparent;
            border-bottom-color: transparent;
        }
        /* 黄色压住黑色 */
        .flag .yellow.alt { z-index: 23; }
        .flag .yellow.alt,
        .flag .yellow.alt:before,
        .flag .yellow.alt:after {
            border-right-color: transparent;
            border-left-color: transparent;
            border-bottom-color: transparent;
        }
        /* 绿色压住黑色  */
        .flag .green.alt { z-index: 23; }
        .flag .green.alt,
        .flag .green.alt:before,
        .flag .green.alt:after {
            border-top-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
        }
        /* 红色压住绿色  */
        .flag .red.alt { z-index: 23; }
        .flag .red.alt,
        .flag .red.alt:before,
        .flag .red.alt:after {
            border-top-color: transparent;
            border-right-color: transparent;
            border-left-color: transparent;
        }
        </style>
    </head>
    <body>
        <ul class="flag">
            <li class="blue"></li>
            <li class="blue alt"></li>
            <li class="yellow"></li>
            <li class="yellow alt"></li>
            <li class="black"></li>
            <li class="green"></li>
            <li class="green alt"></li>
            <li class="red"></li>
            <li class="red alt"></li>
        </ul>
    </body>
</html>

大家可以运行看看效果：