CSS3 border-image 基本用法

Question

兼容性

Internet Explorer 11, Firefox, Opera 15, Chrome 以及 Safari 6

语法

值	描述
border-image-source	用在边框的图片的路径
border-image-slice	图片边框向内偏移
border-image-width	图片边框的宽度
border-image-outset	边框图像区域超出边框的量
border-image-repeat	图像边框是否应平铺(repeated)、铺满(rounded) 或拉伸(stretched)

使用 border-image 时，其将会替换掉 border-style 属性所设置的边框样式。

原理

作原理就是 九宫格伸缩法 ：把图片切割成九块，然后把他们应用到边和角。

例

div{
  width:200px;
  height:200px;
  margin:20px;
  padding:20px;
  border: 20px solid;
  background-color: #ddd;
  background-clip: padding-box;
}

border-image-source: url(./img/border.png)

1. 是唯一必需的
2. 属性值可以是 URL，数据 URI，CSS 渐变形状，或者行内 SVG

border-image-width

此时默认为 border 的宽度 20px ，与上图一样
若改为 40px

border-image-slice

1. 该属性最多接受 4 个不带单位的正数或者百分比，包括一个可选的 fill 关键字。属性的初始值为 100%（平均分成 9 块）。
2. 这串数值规定从源图片的上部，右部，下部，左部开始测量裁剪。如果缺少一个值，默认取对边的值-如缺少左部的值，同时右部的值为 10px，左部的值会取 10px。
3. 默认舍弃源图片的中心块。一旦使用了 fill 关键字，源图片的中心块将作为该元素的背景。

border-image-repeat

图像边框（不是四个角）的填充模式

round

repeat

stretch：默认，与上面的 26 一样

space

border-image-outset

默认为 0 若设置为 20，刚好包在 margin 外面