详解css3之border-image

时间 2019-11-16

标签详解 css3 css border image 栏目 CSS 繁體版

原文原文链接

border-image简介

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

border-image-sourcehtml
border-image-slicecss3
border-image-widthweb
border-image-outset框架
border-image-repeat学习

为何图片能够做为边框？

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

看下图
spa

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

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

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

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>

以下图

border-image-slice

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

border-image-width

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

border-image-repeat

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

stretch:指定用拉伸方式来填充边框背景图。
repeat:指定用平铺方式来填充边框背景图。当图片碰到边界时，若是超过则被截断。
round:指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好能够铺满整个边框。
space:指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好能够铺满整个边框。

border-image-outset

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

以下图

后续

border-image是css3属性因此存在兼容性问题，须要在属性前面设置-webkit等