马黑黑 发表于 2021-12-24 13:17

CSS图片边框简介

本帖最后由 马黑黑 于 2021-12-24 13:18 编辑

我们已经介绍过 CSS 基于 border 属性设定的边框，现在是时候来了解一下 box 的图片边框了。在 CSS3 以前，边框的设定没有图片什么事，现在不同了，CSS3 引入了 borde-image 属性，可是使用图片来渲染边框；除了 IE 以外任何新版本的主流浏览器都支持该属性。

border-image并不复杂，但理解起来有些困难。我们从最基础的开始：

简略语法：border-image:url(图片) 图片剪裁值 图片呈现值

简单示例：border-image:url('图片地址') 27 round

其中：

（一）参数一      url('图片')：url 是保留词，图片地址写在其后小角括号内（论坛中建议再加上小角单引号）
（二）参数二      图片剪裁值：用纯数字表示，不需要像素单位，如 27 就是表示 27 个像素
（三）参数三      图片呈现值：缺省值是stretch（拉伸），也可选 repeat（重复）和 round（平铺）

（四）特别重要的，应给 border 设置样式与宽度（宽度值依据图片宽度除以3），以确保 border-image 的设定能有效渲染。以下是实例代码：

<div style="margin:4px auto;border:27px dashed transparent; border-image:url('图片地址') 27 repeat;">
      内容
</div>

border-image 属性命令将根据用户设定将类似于如下的九宫格图片进行剪裁，然后用于渲染可视对象代表边框：

https://www.huachaowang.com/data/attachment/forum/202112/22/111133aj5rija6y2zoroxl.gif

但不限于九宫格图片，其他结构的正方形图片亦可，长方形图片也能用（剪裁设定可能要繁琐一些）。

CSS3的 border-image 属性使用图片的原理理解起来有些烧脑，我试着用通俗的语言解说一下：

上述示例代码，告诉 CSS3 我们以 27 个像素将图片切割成九等分，CSS3 就能知道将图片的左上角那一份放在 div 的左上角，右上角取图片的右上角那一份，其余的两个角以此类推；四个边缘则取图片对应边缘的那一份，然后按呈现方式（拉伸、重复或平铺）渲染出效果。

从解释中，我们可以理解，九等分的图片中，中间那一份是用不到的，而我们在制作图片时，可以根据 CSS3 的渲染原理设计合乎我们需要的尺寸，比如各个边角可以有所不同、最中央的那个部分不予理睬。

不论图片结构如何，都应考虑图片被九等分切割后的单元尺寸，它应与我们在 CSS 语法中的切割指令所给的剪裁像素值相符。换言之，若图片长宽为 90×90，则 border 设为 30px 的宽度，border-image 剪裁值设为 30 ，所设定的 border 宽度和图片的剪裁数值是图片边缘长度的三分之一、与九等分后的图片单元保持一致。

border-image 是一个简写属性的语句，如果需要一项一项地设置，请参照如下语法一一尝试：

border-image-source      url(图片地址)
border-image-slice      图片边框向内偏移
border-image-width      图片边框的宽度
border-image-outset      边框图像区域超出边框的量
border-image-repeat      平铺(repeated)、铺满(rounded)或拉伸(stretched）

border-image 还有很多可探讨的知识，本帖到此为止。

效果在楼下——

马黑黑 发表于 2021-12-24 13:17

本帖最后由 马黑黑 于 2021-12-24 13:41 编辑 <br /><br /><p>请参照图片比较各个 div 的渲染效果：<br />&nbsp; </p>
<div style="margin:0px auto;width:40%;padding:10px;border:27px solid #aaa;background:#aaa;border-image:url('https://www.huachaowang.com/data/attachment/forum/202112/22/111133aj5rija6y2zoroxl.gif') 27 stretch;">
        拉伸 stretch
</div>
<p> &nbsp;<br /></p>
<div style="margin:0px auto;width:40%;padding:10px;border:27px solid #aaa;background:#aaa;border-image:url('https://www.huachaowang.com/data/attachment/forum/202112/22/111133aj5rija6y2zoroxl.gif') 27 repeat;">
        重复 repeat
</div>
<p> &nbsp;<br /></p>
<div style="margin:0px auto;width:40%;padding:10px;border:27px solid #aaa;background:#aaa;border-image:url('https://www.huachaowang.com/data/attachment/forum/202112/22/111133aj5rija6y2zoroxl.gif') 27 round;">
        平铺 round
</div>

红影 发表于 2021-12-24 13:40

dashed 是虚线，刚反应过来。我还得得把CSS边框
https://www.huachaowang.com/forum.php?mod=viewthread&tid=55247&fromuid=2
(出处: 花潮论坛)
拿过来一起看。那个帖子里我还在询问需要透明时怎样设，这个例子里就看到了{:4_173:}

马黑黑 发表于 2021-12-24 13:43

红影 发表于 2021-12-24 13:40
dashed 是虚线，刚反应过来。我还得得把CSS边框
https://www.huachaowang.com/forum.php?mod=viewthread&t ...

此处的 transparent 其实换成颜色值也不影响。透明的好处可能在于它不会对图片边框造成影响；有颜色值得好处是图片不能加载时表框也能见到

红影 发表于 2021-12-24 13:44

这个帖子黑黑殚精竭虑，琢磨着怎样通俗易懂。辛苦了。这个讲述很清晰明了。我都想马上跟着练习了{:4_187:}{:4_173:}

马黑黑 发表于 2021-12-24 13:46

红影 发表于 2021-12-24 13:44
这个帖子黑黑殚精竭虑，琢磨着怎样通俗易懂。辛苦了。这个讲述很清晰明了。我都想马上跟着练习了{ ...

主要是不好解释

红影 发表于 2021-12-24 14:05

马黑黑 发表于 2021-12-24 13:46
主要是不好解释

我还是一些疑问，这个功能是截取一张小图的边缘，使用拉伸或平铺等方式，作为边框的表现形式，为什么要三分之一的量才能有效渲染？是不是不是切割，而是颜色的融合？

红影 发表于 2021-12-24 14:10

<p>取27的一半看看：<br />&nbsp; </p>
<div style="margin:0px auto;width:40%;padding:10px;border:13.5px solid #aaa;background:#aaa;border-image:url('https://www.huachaowang.com/data/attachment/forum/202112/22/111133aj5rija6y2zoroxl.gif') 13.5 stretch;">
        拉伸 stretch
</div>
<p> &nbsp;<br /></p>
<div style="margin:0px auto;width:40%;padding:10px;border:13.5px solid #aaa;background:#aaa;border-image:url('https://www.huachaowang.com/data/attachment/forum/202112/22/111133aj5rija6y2zoroxl.gif') 13.5 repeat;">
        重复 repeat
</div>

红影 发表于 2021-12-24 14:17

红影 发表于 2021-12-24 14:10
取27的一半看看：&nbsp;

        拉伸 stretch


对拉伸影响挺大，取27，正好横纵向都取到一个完整小方块，而一半拿不到完整方块，所以半个红和半个橘黄被一起取到并拉伸。

加林森 发表于 2021-12-24 16:34

</div>
<p> &nbsp;<br /></p>
<div style="margin:0px auto;width:40%;padding:10px;border:27px solid #aaa;background:#aaa;border-image:url('https://www.huachaowang.com/data/attachment/forum/202112/22/111133aj5rija6y2zoroxl.gif') 27 repeat;">
        重复 repeat

加林森 发表于 2021-12-24 16:35

挺好挺好，谢谢老黑！{:4_199:}

樵歌 发表于 2021-12-24 17:04

俺看天书来也。{:4_193:}

马黑黑 发表于 2021-12-24 19:24

樵歌 发表于 2021-12-24 17:04
俺看天书来也。

天书不是长酱紫的{:4_170:}

马黑黑 发表于 2021-12-24 19:31

红影 发表于 2021-12-24 14:05
我还是一些疑问，这个功能是截取一张小图的边缘，使用拉伸或平铺等方式，作为边框的表现形式，为什么要三 ...
你看图就知道的，我说的九等分是不是垂直和水平方向的三等分？
当然，不一定俺图片的原始尺寸去设定，它还支持百分比的，你可以多试试。

马黑黑 发表于 2021-12-24 19:34

红影 发表于 2021-12-24 14:17
对拉伸影响挺大，取27，正好横纵向都取到一个完整小方块，而一半拿不到完整方块，所以半个红和半个橘黄被 ...

尝试出别的效果来了

马黑黑 发表于 2021-12-24 19:34

加林森 发表于 2021-12-24 16:35
挺好挺好，谢谢老黑！

客气客气

加林森 发表于 2021-12-24 19:40

马黑黑 发表于 2021-12-24 19:34
客气客气

我学习得不会太快的。有时间就来学习。

马黑黑 发表于 2021-12-24 19:50

加林森 发表于 2021-12-24 19:40
我学习得不会太快的。有时间就来学习。

慢慢来不急的

加林森 发表于 2021-12-24 19:58

马黑黑 发表于 2021-12-24 19:50
慢慢来不急的

谢谢老黑理解。{:4_190:}

樵歌 发表于 2021-12-24 20:49

马黑黑 发表于 2021-12-24 19:24
天书不是长酱紫的

就这样子的。{:4_375:}
页: [1] 2 3
查看完整版本: CSS图片边框简介