CSS3绘制的奥运五环

来源：互联网发布：网络时时音频监编辑：程序博客网时间：2024/04/29 21:50

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3绘制的奥运五环</title>
<style type="text/css">
body{
        margin:20px;
        background-color:#fff;
}
ul.flag{
        list-style-type:none;
        position: relative;
        margin: 20px auto;
        z-index:1;
        top:30px;
        left:30px;
}
.flag li, .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;
        -webkit-box-shadow:-4px -2px 2px #00007f;
        -moz-box-shadow:-4px -2px 2px #00007f;
        -o-box-shadow:-4px -2px 2px #00007f;
        box-shadow:-4px -2px 2px #00007f;
}
.flag .yellow:after{
        border-color: yellow;
        -webkit-box-shadow:-4px -2px 2px #808000;
        -moz-box-shadow:-4px -2px 2px #808000;
        -o-box-shadow:-4px -2px 2px #808000;
        box-shadow:-4px -2px 2px #808000;
}
.flag .black:after{
        border-color: black;
        -webkit-box-shadow:-0px -4px 2px #808080;
        -moz-box-shadow:0px -4px 2px #808080;
        -o-box-shadow:0px -4px 2px #808080;
        box-shadow:0px -4px 2px #808080;
}
.flag .green:after{
        border-color: green;
        -webkit-box-shadow:4px -2px 2px #001000;
        -moz-box-shadow:4px -2px 2px #001000;
        -o-box-shadow:4px -2px 2px #001000;
        box-shadow:4px -2px 2px #001000;
}
.flag .red:after{
        border-color: red;
        -webkit-box-shadow:4px -2px 2px #800000;
        -moz-box-shadow:4px -2px 2px #800000;
        -o-box-shadow:4px -2px 2px #800000;
        box-shadow:4px -2px 2px #800000;
}

.flag .blue.alt { z-index: 24; }
.flag .yellow.alt,
.flag .green.alt,
.flag .red.alt{ z-index: 23; }

.flag .blue.alt:after {
/* 让黄色压住蓝色 */
border-bottom-color: transparent;
}
.flag .yellow.alt:after {
/* 让黑色压住黄色 */
border-right-color: transparent;
}
.flag .green.alt:after {
/* 让黑色压住绿色 */
border-top-color: transparent;
}
.flag .red.alt:after {
/* 让绿色压住红色 */
border-left-color: transparent;
}

/*高光*/
div.light{
        position: relative;
        width:50em;
        height:25em;
        background:-webkit-linear-gradient(left top,rgba(255, 255,255,0),rgba(255, 255, 255,0.7),rgba(255, 255, 255,0),rgba(255, 255, 255,0.9),rgba(255, 255, 255,0),rgba(255, 255, 255,0.9),rgba(255, 255, 255,0),rgba(255, 255, 255,0.7),rgba(255, 255, 255,0));
        background:-moz-linear-gradient(left top,rgba(255, 255,255,0),rgba(255, 255, 255,0.7),rgba(255, 255, 255,0),rgba(255, 255, 255,0.9),rgba(255, 255, 255,0),rgba(255, 255, 255,0.9),rgba(255, 255, 255,0),rgba(255, 255, 255,0.7),rgba(255, 255, 255,0));
        background:-o-linear-gradient(left top,rgba(255, 255,255,0),rgba(255, 255, 255,0.7),rgba(255, 255, 255,0),rgba(255, 255, 255,0.9),rgba(255, 255, 255,0),rgba(255, 255, 255,0.9),rgba(255, 255, 255,0),rgba(255, 255, 255,0.7),rgba(255, 255, 255,0));
        background:linear-gradient(left top,rgba(255, 255,255,0),rgba(255, 255, 255,0.7),rgba(255, 255, 255,0),rgba(255, 255, 255,0.9),rgba(255, 255, 255,0),rgba(255, 255, 255,0.9),rgba(255, 255, 255,0),rgba(255, 255, 255,0.7),rgba(255, 255, 255,0));
        top:0;
        left:0;
        z-index:2;
}
</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>
        <div class="light"></div>
</body>
</html>