连续的图像边框

2021-10-28  本文已影响0人  xinhui9056

主要的思路就是在背景图片之上,再叠加一层纯白的实色背景。为了让下层的图片背景透过边框区域显示出来,我们需要给两层背景指定不同的 background-clip 值。最后一个要点在于,我们只能在多重背景的最底
层设置背景色,因此需要用一道从白色过渡到白色的 CSS 渐变来模拟出纯白实色背景的效果。

<!--html-->
<div class="box">
    主要的思路就是在背景图片之上,再叠加一层纯白的实色背景。
为了让下层的图片背景透过边框区域显示出来,我们需要给两层
背景指定不同的 background-clip 值。最后一个要点在于,我们
只能在多重背景的最底层设置背景色,因此需要用一道从白色过
渡到白色的 CSS 渐变来模拟出纯白实色背景的效果。
</div>
<!--css-->
.box{
    padding: 1em;
    width: 300px;
    margin: 0 auto;
    border: 1em solid transparent;
    background: linear-gradient(white, white),
                url(1.jpg);
    background-size: cover;
    background-clip: padding-box, border-box;
}
效果图
上一篇 下一篇

猜你喜欢

热点阅读