CSS3 border-image 彻底明白

songjz 发布于2019-08-29 13:19 / 1682人阅读

摘要：用于给边框贴上背景图像类似于中的背景属性。重复性取值为重复只是其中之一，其余两个是平铺和拉伸。其中，是默认值。例如表示水平方向平铺，垂直方向重复。不进行拉伸，不凑整。效果如下白框为部分资料来源网络亲们，看懂没不懂请留言，帮你解答。。

border-image用于给border（边框）贴上背景图像

类似于CSS中的background（背景）属性。 例如：background:url(xx.jpg) 27px no-repeat;指的是图片(url(xx.jpg))，位置(27px)，重复性(no-repeat)。
border-image与此类似，border-image包括图片，剪裁位置（与background位置一样，也是数值，也支持百分值），重复性。
例如：border-image:url(border.png) 27 repeat; 指的就是图片(url(border.png))，剪裁位置(27)，重复方式(repeat)。

下面我们将border-image的复合写法分解描述，

border-image的主要参数就是上面提到的三个：图片，剪裁位置，重复性。
其实还有另外两个，文章最后面再讲。更好理解

1、图片(border-image-source)

border-image的背景图使用url()调用，图片可以是相对路径或是绝对路径，也可以不使用图片，即border-image:none;

2、图片剪裁位置(border-image-slice)

没有单位，默认单位就是像素(px)。例如：border-image:url(border.png) 27 repeat;这里的27专指27px。

支持百分比值，百分比值大小是相对于边框图片的大小，假设边框图片大小为400px*300px，则20%的实际效果就是剪裁了图片的60px 80px 60px 80px的四边大小。

剪裁特性。类似于CSS中的clip属性。其有1~4个参数，代表上右下左四个方位的剪裁，符合CSS普遍的方位规则（与margin，padding等或border-width一致），举个简单的例子，前面提到，支持百分比宽度，所以这里“30% 35% 40% 30%”的示意可以用下图表示：

距离图片上部30%的地方，距离右边35%，距离底部40%，左边30%的地方各剪裁一下。也就是对图片进行了“四刀切”，形成了九个分离的区域，这就是九宫格，这是下面深入讲解border-image的基础。

3、重复性(border-image-repeat)

取值为repeat（重复）只是其中之一，其余两个是round（平铺）和stretch（拉伸）。其中，stretch是默认值。

参数0~2个，0则使用默认值 – stretch，例如：border-image:url(border.png) 30% 40%;就等同于border-image:url(border.png) 30% 40% stretch stretch;；1则表示水平方向及垂直方向均使用此参数；2个参数的话则第一个参数表水平方向，第二个参数表示垂直方向。例如：border-image:url(border.png) 30% 40% round repeat;表示水平方向round（平铺），垂直方向repeat（重复）。

关于round 和repeat 的区别。
round会凑整填充（进行了适度的拉伸）。repeat不进行拉伸，不凑整。 具体效果看文章后边的例子。

4、实际渲染规则

通过裁切属性值，将边框背景图切出了“九宫格”的模型，那这张背景图怎么对应地贴在div的边框上呢？

<————————>

如图在border-image中的橙红色的四个边角只会呆在border的四个角,并且水平和垂直方向均被拉伸来填充border的四个角。

如图上下区域即border-top-image和border-bottom-image受到第一个参数——水平方向效果影响：如果为repeat，则此区域被水平重复(round水平平铺，stretch水平拉伸)来填充对应的上下border【该区域在垂直方向上首先会按所对应的border-image-width的值等比缩放，然后再按参数设置在边框水平方向上进行重复或平铺或拉伸】

左右区域border-left-image和border-right-image 的作用效果亦然【该区域在水平方向上首先会按所对应的border-image-width的值等比缩放，然后再按参数设置在边框垂直方向上进行重复或平铺或拉伸】

我们用下图(27×3)px *(27×3)pxpng 做实验，我给不同部位加了一个序号做标志，便于观察。

    // 加一个蓝色背景的父级，便于我们分析效果。
    .border_image {
        width: 400px;
        height: 115px;
        border: 3em double orange;
        -webkit-border-image: url(border.png) 27 round;
        border-image: url(border.png) 27 round;
    }
    .box {
        background: blue;
    }

效果如下

   //去掉重复属性，即默认都为stretch
   border-image: url(border.png) 27;

效果如下

  //使用repeat
  border-image: url(border.png) 27 repeat;

效果如下

    //边框宽度改变
    border-image: url(border.png) 27 repeat stretch;
    border-width: 3rem 1rem;

效果如下

5、(边框背景宽度)border-image-width

这个属性默认是边框的宽度，用来限制相应区域背景图的范围，
首先相应背景区域的图像会根据这个属性值进行缩放。然后再重复或平铺或拉伸。

在复合写法中应该位于 slice属性 和repeat属性中间 用“/”间隔
如：border-image:url(border.png) 27 / 6rem / repeat;

语法：border-image-width: [ | | | auto ]{1,4}

length 带 px, em, in … 单位的尺寸值
percentage 百分比
number 不带单位的数字；它表示 border-width 的倍数
auto 使用 auto， border-image-width 将会使用 border-image-slice 的值

    border: 3em double orange;
    border-image: url(border.png) 27 round;
    border-image-width: 6rem;

效果如下
（白框为border）

    border-image-width: 1.5rem;

效果如下
（白框为border）

    border: 3em double orange;
    border-image: url(border.png) 27 round;
    border-image-width: 6rem 1.5rem;

效果如下
（白框为border）

6、（边框背景扩散）border-image-outset

语法：border-image-outset: [  |  ]{1,4}
相当于把原来的贴图位置向外延伸。不能为负值，试一下就知道。

在复合写法中应该位于 border-image-width 后面，用“/”间隔
如：border-image:url(border.png) 27 / 6rem / 1.5rem /repeat;
向外延伸1.5rem再贴图。。

    border: 3em double orange;
    border-image: url(border.png) 27 round;
    border-image-width: 1.5rem;
    border-image-outset: 1.5rem;

效果如下：
（白框为border）

ps 部分资料来源网络

亲们，看懂没？不懂请留言，帮你解答。。保会。。

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

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

CSS3 border-image 彻底明白

摘要：用于给边框贴上背景图像类似于中的背景属性。重复性取值为重复只是其中之一，其余两个是平铺和拉伸。其中，是默认值。例如表示水平方向平铺，垂直方向重复。不进行拉伸，不凑整。效果如下白框为部分资料来源网络亲们，看懂没不懂请留言，帮你解答。。 border-image用于给border（边框）贴上背景图像类似于CSS中的background（背景）属性。例如：background:url...

chenjiang3 2019-08-20 19:07 评论0 收藏0
CSS3 新特性

摘要：语法说明对象选择器投影方式轴偏移量轴偏移量模糊半径阴影扩展半径阴影颜色内阴影，向右偏移，向下偏移，模糊半径，阴影缩小属性的参数设置取值阴影类型此参数可选。 CSS3 是最新的 CSS 标准，并且完全向后兼容，不过目前W3C 仍然在对 CSS3 规范进行开发，虽然标准的规范还没有正式发布，但是现代浏览器已经支持相当多的 CSS3 属性了。CSS3 提供了很多可以把玩的新特性，模糊了之前只...

justjavac 2019-08-29 13:07 评论0 收藏0
CSS魔法堂：重拾Border之——图片作边框

摘要：一铺搞定一铺清袋粤语的一铺搞定其实就是一次完成全部工作的意思，上面关于的属性，要是每次都逐个设置那要敲多少次键盘啊。。。语法粤语的一铺清袋其实就是把之前的成果一次性归零。前言当CSS3推出border-radius属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border-radius还分水平半径和垂直半径，然后又发现border-top-left/...

linkFly 2019-08-30 12:59 评论0 收藏0
详解css3之border-image

摘要：属性用来指定边框所需素材的路径，语法可以参照。当图片碰到边界时，如果超过则被截断。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。如下图后续是属性所以存在兼容性问题，需要在属性前面设置等 border-image简介 css3中新增了一个属性border-image，这个属性允许开发者使用图片来定义边框,扩充了 CSS2 中仅有的几个预定义边框样式(border-...

jackzou 2019-08-21 10:46 评论0 收藏0
CSS3 边框

摘要：边框用，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如。在本章中，您将了解以下的边框属性圆角在中添加圆角棘手。 CSS3 边框用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop。在本章中，您将了解以下的边框属性： border-radius box-shadow border-image CSS3 圆角在 ...

Charles 2019-08-29 13:25 评论0 收藏0