课外天地 李树青学习天地Web技术 → 课上练习代码——利用CSS实现的太极图


  共有13659人关注过本帖平板打印复制链接

主题:课上练习代码——利用CSS实现的太极图

帅哥哟,离线,有人找我吗?
admin
  1楼 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 管理员
等级:管理员 帖子:1939 积分:26594 威望:0 精华:34 注册:2003/12/30 16:34:32
另一个版本  发帖心情 Post By:2016/10/24 17:16:46 [只看该作者]


图片点击可在新窗口打开查看此主题相关图片如下:无标题.png
图片点击可在新窗口打开查看

<html>

<head>

    <meta http-equiv="Content-Type" c/>

    <style>

        #yin-yang {

            width: 100;

            height: 200;

            background: #EEE;

            border-color: red;

            border-style: solid;

            border-width: 2px 2px 2px 100;

            border-radius: 100%;

            position: relative;

            /**作为子元素的定位父元素,也就是说,如果某个元素相对定位了,那其下的子孙元素,在没有其他定位元素隔离的情况下,将以这个父元素的包围框为基准做绝对定位。**/

        }

        #yin-yang:before {

            content: "";

            position: absolute;

            top: 0;

            left: -50%;

            background: #EEE;

            border: 40px solid red;

            border-radius: 100%;

            width: 20px;

            height: 20px;

        }

        #yin-yang:after {

            content: "";

            position: absolute;

            top: 50%;

            left: -50%;

            background: red;

            border: 40px solid #EEE;

            border-radius: 100%;

            width: 20px;

            height: 20px;

        }

    </style>

</head>

<body>

<div id="yin-yang"></div>

</body>

</html>


 回到顶部