css 制作一个奥运五环效果

作者：简简单单 2014-05-27

提示：您可以先修改部分代码再运行

<html>
    <head>
        <meta charset="utf-8"/>
        <title>CSS3的border-radius属性</title>
        <style>
        .circle {
            background-color:#f00;
               /* div的宽和高为600px即正方形的边长为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></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

上一个：css实现幻灯片特效代码下一个：css 两列宽度自适应三种测试例子