CSS3绘制漂亮的网页奥运五环，还带有渐变效果，有金属质感的连环5环，看上去十分漂亮，本效果基于CSS3技术，因此IE8及以下版本都将看不到效果，最后使用火狐或Chrome浏览器，或Opera浏览器。
代码如下：
<!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>效果如图：
