首页 > 代码库 > 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属性