css3 - 如何使用CSS实现图片内边缘模糊效果?
PHP中文网
PHP中文网 2017-04-17 11:16:38
0
2
1117
<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的多种值,都不生效。

应该如何实现这种效果?

PHP中文网
PHP中文网

认证高级PHP讲师

全部回覆(2)
巴扎黑

雷雷

Peter_Zhu

雖然問題比較久了,還是來回答。剛學習前端,請多指教!

<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;
        }
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板