<header>
<p class="cover">
<img src="images/bg.jpg" alt="">
</p>
</header>
.cover {
border-radius: 50%;
width: 180px;
height: 180px;
overflow: hidden;
border: 10px ridge #F4E9E0;
}
代码大概是这样的,p层实现了一个圆形,因此无论下面的图片是什么大小的,都只显示一个圆形的大小,就像很多网站上看到的圆形头像那样。
现在想要在图片内添加和背景颜色一致的带透明效果的内阴影,效果如下图。我尝试了box-shadow属性、border-style的多种值,都不生效。
应该如何实现这种效果?
巴扎黑2017-04-17 11:18:38
css
.cover { border-radius: 50%; width: 180px; height: 180px; overflow: hidden; position:relative; } .cover:after{ position:absolute; content:''; width:100%; height:100%; top:0; left:0; border-radius:50%; box-shadow:0 0 30px 10px rgba(255,255,255,.7) inset; }
天蓬老师2017-04-17 11:18:38
虽然问题比较久了,还是来答一下。刚学习前端,请多指教!
<header>
<p class="cover">
<--! <img src="images/bg.jpg" alt=""> -->
</p>
</header>
.cover {
border-radius: 50%;
width: 180px;
height: 180px;
overflow: hidden;
background: url('images/bg.jpg');
box-shadow:0 0 30px 10px rgba(255,255,255,.7) inset;
}