手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >css画太极图(阴阳八卦)
css画太极图(阴阳八卦)
摘要:#yin-yang{width:96px;height:48px;background:#eee;border-color:red;bord...

css画太极图(阴阳八卦)1

#yin-yang {

width: 96px;

height: 48px;

background: #eee;

border-color: red;

border-style: solid;

border-width: 2px 2px 50px 2px;

border-radius: 100%;

position: relative;

}

#yin-yang:before {

content: "";

position: absolute;

top: 50%;

left: 0;

background: #eee;

border: 18px solid red;

border-radius: 100%;

width: 12px;

height: 12px;

}

#yin-yang:after {

content: "";

position: absolute;

top: 50%;

left: 50%;

background: red;

border: 18px solid #eee;

border-radius:100%;

width: 12px;

height: 12px;

}

【css画太极图(阴阳八卦)】相关文章:

css3中圆角和阴影的实验

使用CSS3实现圆角,阴影,透明

css语法大全

css绝对定位

css设置body背景图片随内容增加多少

css实现body背景图片水平垂直居中方法

CSS3制作loading加载动画效果代码

利用CSS3实现圆角的outline效果的教程

CSS滤镜实现的颜色渐变翻转效果

Div CSS实例教程:页面制作方法

精品推荐
分类导航