css3畫太極圖

本文轉載自查看原文 2014-10-10 19:35 2182 html5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>太極圖</title>
    <style type="text/css">
        .main {
            width: 150px;
            height: 300px;
            margin: 100px auto;
            border-radius: 150px;
            border:1px solid gray;
            border-left: 150px solid black;
        }
        .circle {
            width: 0px;
            height: px;
            padding: 25px;
            border-radius: 75px;
            margin-left: -75px;
        }
        .black {
            border:50px solid black;
            background: white;
        }
        .white {
            border:50px solid white;
            background: black;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="circle black"></div>
        <div class="circle white"></div>
    </div>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS3之太極圖源代碼 python畫太極圖 CSS3制作太極圖以及用JS實現旋轉太極圖 CSS3實現旋轉的太極圖（二）：只用1個DIV CSS3效果：太極圖----偽類實現 CSS3效果：太極圖----三層div實現 css3太極圖效果+自動旋轉使用turtle庫畫太極圖 Ledit學習（1）——用Ledti畫太極圖 CSS3繪制旋轉的太極圖案（一）