css border-image 图片边框

css border-image 图片边框

效果

通过 css中的 border-image, 我们可以实现漂亮的边框效果.

先上效果图:

效果 1:

效果 2:

如何实现

border-image 样式的实现过程就是将我们提供的图片切分,
然后按照一定规则展示在 dom 元素.

下面的例子, 会用到下面的图片, 大家可以自取.

效果 1 的实现

#box {
  font-size: 16px;
  border: 3px solid;
  border-image-source: url(./border-1.jpg);
  border-image-slice: 25%;
  /* 默认值是1, 代表和 border-width 一致 */
  /* 超过50%的值是没有意义的 */
  border-image-width: 30px;
}

• border: 3px 表明了 border-width 的值是 3px;
  • border 的值不能是 none, border-width 的值也能是 0, 否则边框图片无法展示
  • solid 没有什么意义
• border-image-source 我们使用的图片
• border-image-slice 用于切分引用的边框图片
• border-image-width 切分浏览器中的 dom 元素, 用于展示边框图片
  • 默认值是 1, 表示和 border-width 一样. (例子中是 3px)

其中, 比较难理解的是, border-image-slice 和 border-image-width

在此, 分别讲解一下

border-image-slice

border-image-slice 用于切分引用的边框图片;
那具体是如何切分的呢?

可以看一下图片:

代表的分别是

#box {
  border-image-slice: 50% 50% 50% 50%;
  border-image-slice: 67% 67% 67% 67%;
  border-image-slice: 50% 75% 67% 58%;
}

具体的作用就是把图片切分成 9 部分.

• 4 个角, 用于展示 border 的四个角.
• 角与角之间的 4 个边, 用于展示 border 的边
• 中间的 1 块, 可以用于填充 (使用关键字 fill, 默认不填充)

那么, 如果填写 100%, 如何切分呢?
会把整个图片当成 4 个角.

border-image-width

作用和border-image-slice类似.
只是作用于 dom 元素.

将 border 拆分
四条虚线, 讲 dom 元素的 border 区域和内容区域分割.

• border 区域: 图片中虚线与 outer border edge
• 内容区域: 被虚线包裹住的内容

其中 border 区域, 用于展示border-image-slice切分的图片.

需要特别注意:

border-width 的宽度, 并不会随着 border-image-width 的值而改变.
所以, 在 dom 的盒模型中, border 所占的空间是不变的.

效果 1 的具体实现

明白了上面 2 个属性, 接下来就好理解了.

border-image-slice: 25%; 讲原始的边框图片(图片大小: 454 × 600 px), 拆分成 9 个区域.
如图所示

• 蓝色区域, 也就是 4 个角.
• 红色区域, 就是角与角之间的 4 条边. 默认的处理是拉伸红色区域, 达到铺满边框的效果.

border-image-width: 30px 指明了 dom 元素中, 给边框图片的空间.
效果如图:

红色区域就是用于展示边框图片的 dom 区域.

原始图片的大小是 454 × 600 px, 在 border 所占的区域有可能是不够用的;会进行缩放.

效果 2 的实现

了解了效果 1 的实现. 效果 2 就非常简单了.
只需要了解一下 border-image-repeat 即可.

border-image-repeat

在默认情况下, 会拉伸border-image-slice拆分的边区域.

#d {
  border-image-repeat: stretch;
}

• stretch: 拉伸图片以填充边框。
• repeat: 平铺图片以填充边框。
• round: 平铺图像。当不能整数次平铺时，根据情况放大或缩小图像。
• space: 平铺图像 。当不能整数次平铺时，会用空白间隙填充在图像周围（不会放大或缩小图像）

了解到这个属性之后, 效果 2 就很好理解了.

p {
  border: 20px solid;
  border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
  border-image-repeat: round;
  border-image-slice: 30px;
  border-image-width: 16px;
  padding: 40px;
}

边框图片的大小是 90 x 90 px;
border-image-slice: 30px, 将其拆分成 9 个区域.

四个角的紫色圆形, 用于展示 4 个角.
蓝色的圆形, 用于展示边. 但是由于我们指定了border-image-repeat: round, 所以蓝色圆形会平铺, 填充边框.