在网上看到很多使用圆来修饰图片样式，看这感觉很舒服，这个主要在用户个人中心和在咨询里面使用的较多。
最终成品图片是：
看到这样的需求的时候，首先就想到了border-radius这个属性，用这个属性来画圆，让后将图片丢到里面去。
此时有两个方案：
一、图片当成背景图片丢到里面。
二、在html中插入img的图片。
第一个方案是可以直接使用，这里就不再赘述了。
这里主要是第二个方案。实现的方案有点难度。
这里主要使用两个div来控制同心圆。
贴代码：
<style>
*{
padding: 0;
margin: 0;
}
.images{
background: none repeat scroll 0 0 rgba(87, 120, 137, 0.1);
box-shadow: 0 0 6px #BDCCD4;
border-radius: 50%;
width: 120px;
height: 120px;
padding: 10px;
position: relative;
text-align: center;
}
.images:hover{
background-color: red;
}
.pic{
border-radius: 50%;
overflow: hidden;
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
<body>
<div class="images">
<div class="pic">
<img src="http://static.cnbetacdn.com/thumb/mini/article/2015/0615/f3db67f28055129.png_100x100.png">
</div>
</div>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
