转载:[url]http://www.zhangxinxu.com/wordpress/2010/01/css3-border-image%E8%AF%A6%E8%A7%A3%E3%80%81%E5%BA%94%E7%94%A8%E5%8F%8Ajquery%E6%8F%92%E4%BB%B6/[/url]
[size=medium]Border-image的例子:[/size]
[size=medium][b]熟悉border-image的一些特性[/b][/size]
我们可能对于CSS2中的background属性比较熟悉，例如：background:url(xx.jpg) 27px no-repeat;
指代的是图片(url(xx.jpg))，位置(27px)，重复性(no-repeat)。
border-image于此类似，border-image包括图片，剪裁位置（与background位置一样，也是数值，也支持百分值），重复性。例如：border-image:url(border.png) 27 repeat;，指的就是图片(url(border.png))，剪裁位置(27)，重复方式(repeat)。试着对比background，这有助于border-image属性的记忆。
具体描述border-image的参数
border-image的参数就是上面提到的三个：[color=red]图片，剪裁位置，重复性[/color]。
1、图片(border-image-source)
与CSS2中background-image属性一样，border-image的背景图使用url()调用，图片可以是相对路径或是绝对路径，也可以不使用图片，即border-image:none;
2、图片剪裁位置(border-image-slice)
此参数特点比较鲜明：
1、没有单位，专指像素。这类似于flash的as脚本，舞台高宽，影片剪辑大小，位移直接就是一个数值，没有单位，因为默认单位就是像素(px)了。例如：border-image:url(border.png) 27 repeat;这里的27专指27像素。
2、支持百分比值，百分比值大小事相对于边框图片而言，假设边框图片大小为400px*300px，则20%的实际效果就是剪裁了图片的60px 80px 60px 80px的四边大小。
3、剪裁特性。如果您对CSS中clip属性(clip:rect(auto, auto, auto, auto))比较了解，则这里理解就会轻松些。clip可以说是CSS中一个明目张胆的剪裁属性，而此处的属性虽然表意上不是剪裁，但是在border-image效果的实现上来说，就好像是个剪裁工具，把边框图片四分五裂，再重新安置，变形。其有1~4个参数，其方位规则符合CSS普遍的方位规则（与margin，padding等或border-width一致），上右下左顺时针，再赋予剪裁的含义，举个简单的例子，前面提到，支持百分比宽度，所以这里“30% 35% 40% 30%的”示意可以用下图表示：
[img]http://dl.iteye.com/upload/attachment/0063/3337/bd674c57-9490-31c5-b5d4-75f6bb93c840.png[/img]
看图说话就是，[color=red]离图片上部30%的地方剪裁一下，在右边35%的地方剪裁一下，在离底部40%的地方裁剪一下，在距左边30%的地方也剪裁一下。于是总共对图片进行了“四刀切”，形成了九个分离的区域，这就是九宫格[/color]，这是下面深入讲解border-image的基础。
3、重复性(border-image-repeat)
这里的重复性有别于background的背景重复，差别较大。background图片就是重复，不重复，水平重复，垂直重复，总之就是围绕repeat（重复）这个词打转，一家独大。而对于border-image，可谓是三足鼎立，[color=red]repeat（重复）[/color]只是其中之一，其余两个是[color=red]round（平铺）[/color]和[color=red]stretch（拉伸）[/color]。其中，stretch是默认值。
参数0~2个，0则使用默认值 – stretch，例如：border-image:url(border.png) 30% 40%;就等同于border-image:url(border.png) 30% 40% stretch stretch;；1则表示水平方向及垂直方向均使用此参数；2个参数的话则第一个参数表水平方向，第二个参数表示垂直方向。例如：border-image:url(border.png) 30% 40%;就等同于[color=red]border-image:url(border.png) 30% 40% round repeat;[/color]表示[color=red]水平方向[/color]round（平铺），[color=red]垂直方向[/color]repeat（重复），至于何为平铺何为重复下面会深入讲解。
三、深入理解border-image的宽度和展示方式
分开理解border-image的宽度或是展示方式其实不太难的，关键是这两者结合使用时候的含义，需要花一定的功夫的理解。
[size=medium]Border-image的例子:[/size]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>background-clip</title>
<style>
div{
margin-top:20px;
}
.div0{
-webkit-border-image:url(rounded_corner.png) 20 20 20 20;border-width:10px;-webkit-box-sizing: border-box;
}
.div1{
-webkit-border-image:url(rounded_corner.png) 20;border-width:10px;-webkit-box-sizing: border-box;
}
.div2{
-webkit-border-image:url(rounded_corner.png) 20/10px;/*第一个20是裁剪区域, 即20 20 20 20; 第二个20px是指border的宽度*/
}
</style>
</head>
<body>
<div class="div0">div0</div>
<div class="div1">div1</div>
<div class="div2">div2</div>
<img src="rounded_corner.png" style="margin-top:50px;">
</body>
</html>[size=medium][b]熟悉border-image的一些特性[/b][/size]
我们可能对于CSS2中的background属性比较熟悉，例如：background:url(xx.jpg) 27px no-repeat;
指代的是图片(url(xx.jpg))，位置(27px)，重复性(no-repeat)。
border-image于此类似，border-image包括图片，剪裁位置（与background位置一样，也是数值，也支持百分值），重复性。例如：border-image:url(border.png) 27 repeat;，指的就是图片(url(border.png))，剪裁位置(27)，重复方式(repeat)。试着对比background，这有助于border-image属性的记忆。
具体描述border-image的参数
border-image的参数就是上面提到的三个：[color=red]图片，剪裁位置，重复性[/color]。
1、图片(border-image-source)
与CSS2中background-image属性一样，border-image的背景图使用url()调用，图片可以是相对路径或是绝对路径，也可以不使用图片，即border-image:none;
2、图片剪裁位置(border-image-slice)
此参数特点比较鲜明：
1、没有单位，专指像素。这类似于flash的as脚本，舞台高宽，影片剪辑大小，位移直接就是一个数值，没有单位，因为默认单位就是像素(px)了。例如：border-image:url(border.png) 27 repeat;这里的27专指27像素。
2、支持百分比值，百分比值大小事相对于边框图片而言，假设边框图片大小为400px*300px，则20%的实际效果就是剪裁了图片的60px 80px 60px 80px的四边大小。
3、剪裁特性。如果您对CSS中clip属性(clip:rect(auto, auto, auto, auto))比较了解，则这里理解就会轻松些。clip可以说是CSS中一个明目张胆的剪裁属性，而此处的属性虽然表意上不是剪裁，但是在border-image效果的实现上来说，就好像是个剪裁工具，把边框图片四分五裂，再重新安置，变形。其有1~4个参数，其方位规则符合CSS普遍的方位规则（与margin，padding等或border-width一致），上右下左顺时针，再赋予剪裁的含义，举个简单的例子，前面提到，支持百分比宽度，所以这里“30% 35% 40% 30%的”示意可以用下图表示：
[img]http://dl.iteye.com/upload/attachment/0063/3337/bd674c57-9490-31c5-b5d4-75f6bb93c840.png[/img]
看图说话就是，[color=red]离图片上部30%的地方剪裁一下，在右边35%的地方剪裁一下，在离底部40%的地方裁剪一下，在距左边30%的地方也剪裁一下。于是总共对图片进行了“四刀切”，形成了九个分离的区域，这就是九宫格[/color]，这是下面深入讲解border-image的基础。
3、重复性(border-image-repeat)
这里的重复性有别于background的背景重复，差别较大。background图片就是重复，不重复，水平重复，垂直重复，总之就是围绕repeat（重复）这个词打转，一家独大。而对于border-image，可谓是三足鼎立，[color=red]repeat（重复）[/color]只是其中之一，其余两个是[color=red]round（平铺）[/color]和[color=red]stretch（拉伸）[/color]。其中，stretch是默认值。
参数0~2个，0则使用默认值 – stretch，例如：border-image:url(border.png) 30% 40%;就等同于border-image:url(border.png) 30% 40% stretch stretch;；1则表示水平方向及垂直方向均使用此参数；2个参数的话则第一个参数表水平方向，第二个参数表示垂直方向。例如：border-image:url(border.png) 30% 40%;就等同于[color=red]border-image:url(border.png) 30% 40% round repeat;[/color]表示[color=red]水平方向[/color]round（平铺），[color=red]垂直方向[/color]repeat（重复），至于何为平铺何为重复下面会深入讲解。
三、深入理解border-image的宽度和展示方式
分开理解border-image的宽度或是展示方式其实不太难的，关键是这两者结合使用时候的含义，需要花一定的功夫的理解。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
