CSS图片边框简介

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 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 属性命令将根据用户设定将类似于如下的九宫格图片进行剪裁，然后用于渲染可视对象代表边框：

登录/注册后可看大图

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

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 还有很多可探讨的知识，本帖到此为止。

效果在楼下——