border-image简介
css3中新增了一个属性 border-image ，这个属性允许开发者使用图片来定义边框,扩充了 CSS2 中仅有的几个预定义边框样式(border-style)。
border-image 是一个简写属性，分别设定了以下几个属性。
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat
为什么图片可以作为边框？
在开始学习border-image之前我有一个疑问，图片是怎么应用到容器的边框上的？
看下图
简单的说就是把图片的中间部分去掉，从而形成一个 类似边框 的框架。
那么如何使用被划分出来的八格素材来生成一个边框呢？
左上 、 右上 、 左下 、 右下 的四格素材分别作为边框的四个角，而上下左右的四格素材分别经过不同形式的扩展，形成边框的四条边。上图很好的说明了图片形成边框的处理形式。
border-image-source
border-image-source属性用来指定边框所需素材的 路径 ，语法可以参照backgound-image。
需要注意的是，如果只设置了border-image-source属性而其他属性使用缺省值，则边框素材不会被划分九宫格，而是将整个素材按照边框宽度缩放至合适尺寸后安放在 边框四角 。
边框图片 #border_image { width:100px; height:100px; border:15px solid #ccc; border-image:url("http://img.mukewang.com/52e21fea000127e802100210.jpg"); background:#ccc; }
查看更多关于详解css3之border-image_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did113818