css3 border-radius 实践 

<!DOCTYPE html>
<html>
<head>
    <title>taiji</title>
    <style type="text/css">
    
        #taiji {
            width: 400px;
            height:800px;
            border:2px solid black;
            border-left:400px solid black;
            border-radius: 400px;
        }    

        #taiji::before {
            content:'';
            display: block;
            width:100px;
            height:100px;
            border:150px solid black;
            background: white;
            border-radius: 200px;
            margin-left:  -200px;
        }

        #taiji::after {
            content:'';
            display: block;
            width:100px;
            height:100px;
            border:150px solid white;
            background: black;
            border-radius: 200px;
            margin-left:  -200px;
        }

    </style>
</head>
<body>
<div id = 'taiji'></div>
</body>
</html>

 

posted @ 2017-04-09 10:18  silvercell  阅读(544)  评论(0)    收藏  举报