如何使用CSS实现图片内边缘模糊效果？
<header>
<div class="cover">
<img src="images/bg.jpg" alt="">
</div>
</header>
.cover {
border-radius: 50%;
width: 180px;
height: 180px;
overflow: hidden;
border: 10px ridge #F4E9E0;
}代码大概是这样的，DIV层实现了一个圆形，因此无论下面的图片是什么大小的，都只显示一个圆形的大小，就像很多网站上看到的圆形头像那样。
现在想要在图片内添加和背景颜色一致的带透明效果的内阴影，效果如下图。我尝试了box-shadow属性、border-style的多种值，都不生效。
应该如何实现这种效果？
展开
收起
1
条回答
写回答
写回答
-
.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; }2019-07-17 19:18:20赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
