首页 > 代码库 > CSS border-image属性
CSS border-image属性
CSS border-image 属性
border-image属性很容易记，它允许你将图片或CSS渐变形状作为一个元素的边框。
.module {border-image: url(border.png) 25 25 round;}
该属性能被应用于任何元素，但当表格元素（如` tr,th,td `）的border-collapse属性值为collapse时border-image属性无效。
属性
对于border-image而言，border-image-souce是唯一必需的。若无特殊指定，其他属性即为默认值。以下为border-image包含的属性：
border-image-source
.module {border-image-source: url(border.png);}
该属性指明了边框图片的地址。属性值可以是URL，数据URI，CSS渐变形状，或者行内SVG（尽管支持度有限，详情见SVG usage notes一节）
border-image-slice
.module{border-image-source: url(border.png);border-image-slice: 20;}
该属性值指定浏览器从某处裁剪源图片以获得边框的某部分。图片被分为9部分-包括4个边角，4条边，还有中心块。
（红色线围起来的区域为裁剪区域）
该属性最多接受4个不带单位的正数或者百分比，包括一个可选的fill关键字。属性的初始值为100%。
border-image为栅格图片时，不带单位的数字指定了裁剪的像素值；为SVG时，这些数字表示按坐标裁剪。例如，一张大小为100px 100px的栅格图片，任意一边的10%都是10px.下面的SVG usage notes一节涉及SVG情况下百分比如何工作。
这串数值规定从源图片的上部，右部，下部，左部开始测量裁剪。如果缺少一个值，默认取对边的值-如缺少左部的值，同时右部的值为10px，左部的值会取10px.
默认舍弃源图片的中心块。一旦使用了fill关键字，源图片的中心块将作为该元素的背景。
border-image-width
.module{border-image-source: url(border.png);border-image-slice: 20;border-image-width: 20;}
该属性指定了边框图片的宽度。属性值可以是百分比，不带单位的正数，或者是关键字auto.
该属性值规定了元素上部，右部，下部，左部的边框图片宽度。若缺少一个值，则取对边的值。
对该属性而言，百分比数值与边框图片区域的大小有关，而无单位数值将与border-width相乘。
属性的初始值为1，所以若该属性值未设置，但该元素设置了border或border-width属性,边框图片会依照这两个属性值进行绘制。
auto关键字告诉浏览器，可自动选择border-image-slice(如果可用的话)或border-width属性的值。
border-image-outset
.module{border-image-source: url(border.png);border-image-slice: 20;border-image-width: 20;}
该属性值指定了边框图像区域从边框盒子向外延伸的距离。初始值为0。该属性接受最多4个为正的长度值或无单位数字。长度值即为向外延伸的确定距离，无单位数字则要与边框宽度相乘得到向外延伸距离，这与**border-image-width**属性值为无单位数字的情况类似。
border-image-repeat
.module{border-image-source: url(border.png);border-image-slice: 20;border-image-width: 20;border-image-outset: 1;border-image-repeat: round;}
该属性控制图片填充边框区域的重复方式。
可以为该属性指定最多两个值。如果值为1个，在边框的竖直方向和水平方向均应用该值。如果指定了两个值，第一个值应用于边框水平方向，第二个值应用于边框竖直方向。
属性值
- stretch: 初始值。边框图片被拉伸以填充区域。
- repeat: 图片平铺以填充区域，必要时每个部分会用多个图片块填充。
- round: 图片平铺以填充区域，若有必要避免每个部分用多个图片块填充，图片会被重新缩放，然后进行填充。
- space: 图片平铺以填充区域。如果区域无法用整片图片填满，在每部分之间会加入空隙以填满区域。注意，该属性值并非所有浏览器都支持。
在demo中尝试border-image-repeat不同的属性值（space属性值仅作为未来特性，并非所有浏览器都支持）。
使用渐变形状
所有支持border-image的浏览器均支持CSS 渐变。你可以使用任意形式的渐变来制作边框。demo展示了一个重复线性渐变的条状边框（鼠标滑过还可改变颜色）。
浏览器会裁剪该渐变形状，正如裁剪一个正方形图片，使得宽度与高度和border-image-width相等。
使用SVG
使用栅格图像与使用SVG作为边框图片，最大的不同是裁剪时如何测量。
在SVG图片中无单位数值代表坐标。
百分比数值表示与图片尺寸有关。
若SVG没有定义尺寸，则会被默认尺寸算法测量，该算法会使用设置的border-image-outset属性值作为默认尺寸。在实际应用中这个问题可能会造成困扰，所以请尽可能为SVG设置尺寸。
边框图片的链接
你可以像border-image-source链接栅格图片一样，将属性值设为SVG文件的链接。
.module{border-image-source: url(border.png);border-image-slice: 20;border-image-width: 20;border-image-outset: 1;border-image-repeat: round;}
这应该是将SVG作为边框图片的最好方法。所有支持border-image的现代浏览器都会支持border-image-source的值为SVG文件的链接。
inline
你可以使用Base64对SVG边框图片进行编码，或者将SVG标签直接写入border-image-source，但这两种方式都存在不小的问题。
64位编码的SVG存在很多问题，详情见[Probably Don‘t Base64 SVG](https://css-tricks.com/probably-dont-base64-svg/)。
在border-image中直接写入SVG标签同样存在问题：IE浏览器无法识别，而Firefox的支持也很怪异（[见Bug 619500](https://css-tricks.com/probably-dont-base64-svg/)）。
demo中的边框图片是一个行内SVG渐变形状。如果检查CSS你会发现标签被小心地创建-标签外使用双引号，标签内使用单引号，并且在16进制颜色中不使用#.
利用单一重复图片实现边框
这样的效果人们会认为border-image属性很容易实现，可实际上实现的过程多少有点反直觉。
例如，你想为元素添加心型图标的边框。如果使用的图片只有一个心型，效果是无法实现的。你必须拥有一张图片，其中心型图标的排列效果和预期的边框效果一致，这时才能剪裁图片。
（包含8个相同图标的源图片）
如果你认为这听起来很荒谬，那你就拥有了很多支持者。几年前的一篇博客-lengthy discussion of the subject onEric Myer‘s blog，其中讨论了许多前端方面的发展。
demo中，一个心形围绕div的边框重复排列。而源图片中包含了8个相同的心形图标，源图片被裁剪后元素的每条边都由完整的心形装饰。
更多应用
尽管对border-image的支持已经增强-所有现代浏览器均已实现了不带前缀的支持，设置一个备用的border样式仍是值得的。如果浏览器不支持border-image，或边框图片加载失败，设置的边框样式会被浏览器使用。
border-image属性无法像其他属性一样实现动画效果，border-radius同样无法实现。
如果你声明了border-image-source和border的宽度或者border-image-width，同时没有任何剪裁设置，整个未裁剪的图片就会被放置在元素的四个边角，并放大至你指定的宽度。
相关链接
- border：https://css-tricks.com/almanac/properties/b/border/
- border-collapse：https://css-tricks.com/almanac/properties/b/border-collapse/
- box-sizing：https://css-tricks.com/almanac/properties/b/box-sizing/
更多信息
- border-image in the CSS Background and Borders Module Level 3 CR：https://www.w3.org/TR/css3-background/#border-images
- border-image at MDN：https://developer.mozilla.org/en-US/docs/Web/CSS/border-image
- border-image.com：http://www.border-image.com/
- Border Image Explained from Dudley Storey：http://demosthenes.info/blog/438/CSS3-Border-Image-Explained
demo链接
- Practical border-image: responsive picture frame：http://codepen.io/dudleystorey/pen/yyZpeX
- True dotted borders using SVG and border-image：http://codepen.io/luclemo/pen/xbMdEx
- gradient button：http://codepen.io/gssxgss/pen/raQMvg
- Film Strip：http://codepen.io/nickpettit/pen/CzJnr
浏览器支持度
注：本文为译文
原文链接：https://css-tricks.com/almanac/properties/b/border-image/#bi-notes-on-svg
CSS border-image属性
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。