>  Q&A  >  본문

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

<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中文网2764일 전1087

모든 응답(2)나는 대답할 것이다

  • 巴扎黑

    巴扎黑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;
    }
    

    회신하다
    0
  • 天蓬老师

    天蓬老师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;
            }

    회신하다
    0
  • 취소회신하다