CSS揭秘之《边框图像》

TalkingData 发布于2019-08-29 13:19 / 2704人阅读

摘要：如果我们想把一图应用到边框而非背景，就像下面的这样效果可能最容易的方法就是两层标签，外层标签设置背景图片，内层标签设置背景色为白色就达到了效果，可是如果只用一层标签呢，怎么办其实思路是在背景图片之上，再叠加一层纯白的实色背景代码如下

如果我们想把一图应用到边框而非背景，就像下面的这样效果

可能最容易的方法就是两层标签，外层标签设置背景图片，内层标签设置背景色为白色就达到了效果，可是如果只用一层标签呢，怎么办？
其实思路是在背景图片之上，再叠加一层纯白的实色背景
代码如下：

        div {
            padding: 1em;
            border: 1em solid transparent;
            background: linear-gradient(white, white),
            url(../images/stone-art.jpg);
            background-size: cover;
            background-clip: padding-box, border-box;
            background-origin: border-box;
        }

或者再简写一下就是：

        div {
            padding: 1em;
            border: 1em solid transparent;
            background: linear-gradient(white, white) padding-box, url(../images/stone-art.jpg) border-box 0 / cover; 
        }

具体效果见链接
再扩展一下，如果要实现如下所示的边框图像，像信封一下的效果，怎么办

其实有两种方式

使用repeating-linear-gradient

        div {
            padding: 1em;
            border: 1em solid transparent;
            background: linear-gradient(white, white) padding-box,
            repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%,
            #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 6em 6em;

            max-width: 20em;
            font: 100%/1.6 Baskerville, Palatino, serif;
        }

具体效果见链接

使用border-image

        div {
            padding: 1em;
            border: 16px solid transparent;
            border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em,
            #58a 0, #58a 3em, transparent 0, transparent 4em);

            max-width: 20em;
            font: 100%/1.6 Baskerville, Palatino, serif;
        }

具体效果见链接
但是使用border-image 方法存在一些问题

每当我们改变 border-image-slice 时，都需要同时修改 borderwidth 来让它们相互匹配

由于我们不能在 border-image-slice 属性中使用 em 单位，只能把
边框厚度指定为像素单位

条纹的宽度需要在色标的位置信息中写好，因此我们在改变条纹宽
度时，需要修改四处

先暂时写到这里后续再补充

GPU云服务器云服务器大揭秘揭秘云存储云计算揭秘人工智能揭秘

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112525.html

CSS揭秘之《边框图像》

摘要：如果我们想把一图应用到边框而非背景，就像下面的这样效果可能最容易的方法就是两层标签，外层标签设置背景图片，内层标签设置背景色为白色就达到了效果，可是如果只用一层标签呢，怎么办其实思路是在背景图片之上，再叠加一层纯白的实色背景代码如下如果我们想把一图应用到边框而非背景，就像下面的这样效果 showImg(https://segmentfault.com/img/bVUhG5?w=194...

Pikachu 2019-08-20 19:08 评论0 收藏0
[CSS]《CSS揭秘》第二章——背景与边框

摘要：半透明边框相关语法多重边框方案需要注意的是，上面所创建的边框是伪边框，并不响应鼠标事件。方案以左上角为基准。图像边框连续的图像边框属性规定背景的绘制区域。半透明边框 border:10px solid hsla(0,0%,100%,.5); background: white; background-clip: padding-box; showImg(htt...

elina 2019-08-30 15:53 评论0 收藏0
CSS揭秘之《条纹背景》

摘要：先来说说渐变吧效果图如下所示也就是说真正的渐变只出现在容器从到的高度区域如果把两个色标合在一起，会怎样呢是这样规定的如果多个色标具有相同的位置，它们会产生一个无限小的过渡区域，过渡的起止色分别是第一个和最后一个指定值。先来说说渐变吧 background: linear-gradient(#fb3 20%, #58a 80%); 效果图如下所示：也就是说真正的渐变只出现在容器 60%...

jsliang 2019-08-20 19:08 评论0 收藏0