css3实现圆点
效果：
CSS：
.dot {
width: 14px;
height: 14px;
font: 12px/18px Arial;
border-radius: 7px;
display: inline-block;
vertical-align: middle;
position: relative;
box-shadow: 0px 1px 0px rgba(0,0,0,0.3);
background: -moz-linear-gradient(top, #18345d 0%,#6d8390 100%); /*Firefox*/
background: -webkit-gradient(linear, 0 0, 0 100%, from(#18345d), to(#6d8390)); /*Chrome,Safari*/
background: -o-linear-gradient(top, #18345d 0%,#6d8390 100%); /*Opera*/
}
.dot:before {
content: "";
width: 12px;
height: 12px;
border-radius: 6px;
display: inline-block;
margin: 1px 0 0 1px;
background: -moz-linear-gradient(top, #fff 0%,#5da2db 30%,#fff 100%); /*Firefox*/
background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), color-stop(30%, #5da2db), color-stop(100%, #fff)); /*Chrome,Safari*/
background: -o-linear-gradient(top, #fff 0%,#5da2db 30%,#fff 100%); /*Opera*/
}
.dot:after {
content: "";
display: block;
width: 4px;
height: 4px;
border-radius: 2px;
position: absolute;
top: 50%;
left: 50%;
margin: -2px 0 0 -2px;
background: #143345;
}
html：
<span class="dot"></span>这是demo
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
