当前位置：首页 → 问答吧 → css3玩太极

css3玩太极

时间：2011-01-13

来源：互联网

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>css3 太极</title> <style> body{ background-color:#CCC; } *{margin:0;padding:0;} .c{ -moz-border-radius:250px; -webkit-border-radius:250px; border-radius:250px; width:500px; height:500px; background-color:#FFF; position:absolute; left:50%; top:50%; margin:-250px; } .c2{ -moz-border-radius:150px; -webkit-border-radius:150px; border-radius:150px; width:100px; height:100px; background-color:#000; position:absolute; left:125px; top:0px; z-index:3; border:75px solid #FFF; } .c3{ -moz-border-radius:150px; -webkit-border-radius:150px; border-radius:150px; width:100px; height:100px; background-color:#FFF; position:absolute; left:125px; bottom:0px; z-index:2; border:75px solid #000; } .c4{ -moz-border-radius:0 250px 250px 0; -webkit-border-radius:0 250px 250px 0; border-radius:0 250px 250px 0; width:250px; height:500px; background-color:#000; position:absolute; left:250px; z-index:1; } .c5{ -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px; width:100px; height:100px; background-color:#000; position:absolute; left:250px; z-index:4; } .c6{ -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px; width:100px; height:100px; background-color:#FFF; position:absolute; left:350px; z-index:4; } </style> </head> <body> <div class="c"> <div class="c4"></div> <div class="c2"></div> <div class="c3"></div> </div> </body> </html>
提示：您可以先修改部分代码再运行

让我疑惑的是，为何在chrome里面如此的不圆滑

作者: wolfxyx 发布时间: 2011-01-13

杂又发同样的贴子呢