CSS仿手机QQ消息条数提示

	composer @Ta
	2015-07-20 21:31

---

<style>
.xiaoxi{
background: #abc;
border: 1px solid grey;
-moz-border-radius: 8px; 
-webkit-border-radius: 8px; 
border-radius: 8px;
width: 50px;
height: 50px;
display: inline-block;
background:url(http://35230.wodemo.com/file/252108/pkg/icon.png) no-repeat;
/*背景图标地址，建议宽高一致*/
background-size:cover; 
}
.ms {
color: #fff;
width: 20px; 
height: 20px; 
border: 3px solid #FFF;
background: red;
background: -webkit-gradient(linear, left top, left bottom, from(#F55), to(#b00));
text-shadow:1px 1px 1px #000;
box-shadow:0px 3px 2px #000; 
-moz-border-radius: 15px; 
-webkit-border-radius: 15px; 
border-radius: 15px; 
text-align: center;
margin:  0px 0px 30px 30px;
}
</style>
<div class="xiaoxi"><div class="ms">8</div>
</div>

阅:2768

发表于2015-07-20 21:31

#其他教程