css3 - 如何使用CSS实现图片内边缘模糊效果？

问题描述

<header> <p class='cover'><img src='https://www.haobala.com/wenda/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的多种值，都不生效。

应该如何实现这种效果？

问题解答

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;}回答2：

虽然问题比较久了，还是来答一下。刚学习前端，请多指教！

<header> <p class='cover'><--! <img src='https://www.haobala.com/wenda/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;}