css教程制作八卦镜代码分享

}</p> <p>.zodiac .dir {
width: 100px;
height: 100px;
transform: rotate(30deg);
-o-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
position: absolute;
clear: both;
}
.zodiac .left,.zodiac .right {
line-height: 100px;
}
.yinyang_fish {
width: 60px;
height: 60px;
top: 20px;
background:linear-gradient(left, white 49%, #333 51%);
background:-o-linear-gradient(left, white 49%, #333 51%);
background:-moz-linear-gradient(left, white 49%, #333 51%);
background:-webkit-linear-gradient(left, white 49%, #333 51%);
}
.yang_fish,.yin_fish {
width: 50%;
height: 50%;
background: radial-gradient(#333 19%, white 21%);
background: -o-radial-gradient(#333 19%, white 21%);
background: -moz-radial-gradient(#333 19%, white 21%);
background: -webkit-radial-gradient(#333 19%, white 21%);
}
.yin_fish {
background: radial-gradient(white 19%, #333 21%);
background: -o-radial-gradient(white 19%, #333 21%);
background: -moz-radial-gradient(white 19%, #333 21%);
background: -webkit-radial-gradient(white 19%, #333 21%);
}
.solid,.dashed {
width: 100%;
height: 3px;
background: #333;
margin: 5px;
}
.dashed {
background: linear-gradient(left, #333 45%, transparent 46%, transparent 54%, #333 55%);
background: -o-linear-gradient(left, #333 45%, transparent 46%, transparent 54%, #333 55%);
background: -moz-linear-gradient(left, #333 45%, transparent 46%, transparent 54%, #333 55%);
background: -webkit-linear-gradient(left, #333 45%, transparent 46%, transparent 54%, #333 55%);
}
</div>