连续的图像边框

主要的思路就是在背景图片之上,再叠加一层纯白的实色背景。为了让下层的图片背景透过边框区域显示出来,我们需要给两层背景指定不同的 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;
}
效果图
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容