HTML+CSS例子＞太极 

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>太极</title>
    <style>
        html,
        body {
            height: 100%;
            background-color: rgb(190, 184, 184);
        }

        * {
            margin: 0;
            padding: 0;
        }

        .box,
        .box1,
        .box2,
        .box11,
        .box12 {
            /* 圆形设置 */
            border-radius: 50%;
        }

        .box {
            width: 400px;
            height: 400px;
            margin: 50px auto;
            /* 半黑半白 */
            border-top: 200px solid #ffffff;
            border-bottom: 200px solid #000000;
            /* border-box 边框盒子，可以把边框和内边距计算到元素大小之内 */
            box-sizing: border-box;
            /* 阴影设置 */
            box-shadow: 0px 0px 15px rgb(255, 255, 255);
        }

        .box1,
        .box2 {
            width: 200px;
            height: 200px;

            /* 溢出隐藏 */
            overflow: hidden;
            /* margin-top: -100px; */
            /* display: inline-block; */
        }

        .box1,
        .box12 {
            background-color: #fff;
        }

        .box2,
        .box11 {
            background-color: rgb(0, 0, 0);
        }

        .box1 {
            /* 上移 */
            margin-top: -100px;
        }

        .box2 {

            /* margin-left: -5px; */
            /* 上移 */
            margin-top: -200px;
            /* 右移 */
            margin-left: 200px;
        }

        .box11,
        .box12 {
            /* 绝对定位 */
            /* position: absolute; */
            width: 50px;
            height: 50px;
            /* 右移 */
            margin-left: 75px;
            /* 下移 */
            margin-top: 75px;
        }
    </style>
</head>

<body>
    <!-- 半黑半白的圆 -->
    <div class="box">
        <!-- 上白 -->
        <div class="box1">
            <div class="box11"></div>
        </div>
        <!-- 下黑 -->
        <div class="box2">
            <div class="box12"></div>
        </div>
    </div>
</body>

</html>

运行效果： 

                       

 

posted @ 2022-05-12 08:57  卟怪  阅读(35)  评论(0)  编辑  收藏  举报