详解css3之border-image

2019年9月14日 163次阅读 来源: 谦龙

border-image简介

css3中新增了一个属性border-image，这个属性允许开发者使用图片来定义边框,扩充了 CSS2 中仅有的几个预定义边框样式(border-style)。
border-image 是一个简写属性，分别设定了以下几个属性。

  1. border-image-source

  2. border-image-slice

  3. border-image-width

  4. border-image-outset

  5. border-image-repeat

为什么图片可以作为边框？

在开始学习border-image之前我有一个疑问，图片是怎么应用到容器的边框上的？

看下图
《详解css3之border-image》

简单的说就是把图片的中间部分去掉，从而形成一个类似边框的框架。

那么如何使用被划分出来的八格素材来生成一个边框呢？

左上、右上、左下、右下的四格素材分别作为边框的四个角，而上下左右的四格素材分别经过不同形式的扩展，形成边框的四条边。上图很好的说明了图片形成边框的处理形式。

border-image-source

border-image-source属性用来指定边框所需素材的路径，语法可以参照backgound-image。
需要注意的是，如果只设置了border-image-source属性而其他属性使用缺省值，则边框素材不会被划分九宫格，而是将整个素材按照边框宽度缩放至合适尺寸后安放在边框四角。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>边框图片</title>
<style>
#border_image {
    width:100px;
    height:100px;
    border:15px solid #ccc;
    border-image:url("http://img.mukewang.com/52e21fea000127e802100210.jpg");
    background:#ccc;
    }
</style>
</head>
<body>
<div id="border_image"></div>
</body>
</html>

如下图
《详解css3之border-image》

border-image-slice

border-image-slice属性用来设置边框素材的切割尺寸，如下图，依次是上横切割线，右竖切割线，下横切割线，左竖切割线。数值分别代表从上、右、下、左边缘向素材中心延伸的像素/百分比数
注意：切割的数值只接受像素和百分比两个单位，并且像素单位必须省略，即只接收数值或者百分比的形式。例如，border-image-slice: 10 10 30 10代表图片素材按照下图的样式被切割：

《详解css3之border-image》

border-image-width

border-image-width用来设置边框素材的宽度,当同时设置了border-image-width和border-width属性时，那么边框的实际宽度由border-width属性决定。此时，如果border-image-width属性小于border-width属性，边框图片会沿边框的外侧分布而内侧留空形成 padding 的效果；如果border-image-width属性大于border-width属性，边框图片会仍会沿边框的外侧分布而内测溢出，如下图

《详解css3之border-image》

border-image-repeat

border-image-repeat属性用来设置上下左右四边(即2、4、5、7四个素材块)的重复形式，分别有stretch repeat round space四个取值

  1. stretch:指定用拉伸方式来填充边框背景图。

  2. repeat:指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。

  3. round:指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。

  4. space:指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。

border-image-outset

border-image-outset属性会产生使 border-image 相对于原始位置向外侧推移的效果，设置border-image-outset属性会使 border-image 溢出，但不会影响整个盒模型的尺寸，因此在设置此属性时要特别注意防止元素间的相互干扰。

如下图
《详解css3之border-image》

后续

border-image是css3属性所以存在兼容性问题，需要在属性前面设置-webkit等

    原文作者：谦龙
    原文地址: https://segmentfault.com/a/1190000003981179
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞