Question

CSS3中border-image,width和outset值是什么意思?

border-image-source图片路径。
border-image-slice按照top,right,bottom,left的顺序剪，（0到4个参数，可以是百分数）
border0image-repeat。拉伸方式，（0到2个参数）
我的理解：border-image: url(image.png) 20 round;等价于...url(image.png) 20 20 20 20 round stretch;不知道对不对？
------------------------------------------
border-image-wiidth和outset是什么意思呀，默认值是1和0；宽度默认为0px？outset就一头雾水了。麻烦给解释一下这两个值。希望附上例子加以说明，谢谢。

Answer 1

border-image 属性是一个简写属性，用于设置以下属性：

border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat

border-image-source
用在边框的图片的路径。

border-image-slice
图片边框向内偏移。

border-image-width
图片边框的宽度。

border-image-outset
边框图像区域超出边框的量。

border-image-repeat
图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

Answer 2

border-image-width：边框的宽度
border-image-outset：外边框
首先css3升级后边框可以添加图片然后可以给边框定义边框，border-image-width：也就是指边框图片的描边宽度为1px；
border-image-outset是代表边框的描边在最外侧开始向外描边1px，不占用本身的区域。
回答完毕！希望采纳！

追问

非常感谢，您能给我写一个带有完整参数的例子吗？看到部分网站解释说要 border-image-width前面要加一个“/”反斜杠。而outset的前面要加一个问号？就像这样border-image: url(image.png) 10% /16px ? 10px round;这样？

追答

border-image: url(image.png) 10% /16px ? 10px round;

url 图片路径
10% 裁剪图片的10%
/ 是用来区分，图片大小
16px 代表上下边框区域大小
？ 为错误输入方式【建议删掉，不然是错误的样式】
10px 代表走右边框10px
round 是指启用平铺方式来填充边框

追问

　　border-image: url(../Web/learn/1.png) 12 17 26 7 stretch;
　　以上代码，不是说默认边框宽度为1px吗？没有设定边框宽度为什么不是默认的1px呢?
“16px 代表上下边框区域大小”不应该是指定所有边框区域的大小吗？“10px代表走右边框”？是什么意思呢？
问题有点儿多，谢谢您的耐心解答。

Answer 3

outset，，不知道会用PS吗？如果会，解释起来就方便些，
PS的描边，有三个选项，内部，居中，外部，
其实outset跟LI的list-style是一样的，就是外部的意思，，，

就是边框在图片的外面，不占用图片宽度，

追问

会PS，您能给我写一个带有全部属性完整参数的例子吗？看到部分网站解释说要 border-image-width前面要加一个“/”反斜杠。而outset的前面要加一个问号？就像这样border-image: url(image.png) 10% /16px ? 10px round;这样？

追答

http://www.wqcms.com/html/c31/2012-06/3381.html

可能我解释都有点错误，看这里吧。

Answer 4

border-image-width:是CSS3中的设置图片边框的宽度大小值,需要说明的是CSS3语句,IE系列支持不好,IE6-I8根本不支持,IE9开始支持一部分. border-image-outset:设置图像超过边框后最大的值,如果超出量为10PX,那么你的图片将在边框线外,多出10PX.

追问

非常感谢，您能给我写一个带有完整参数的例子吗？看到部分网站解释说要 border-image-width前面要加一个“/”反斜杠。而outset的前面要加一个问号？就像这样border-image: url(image.png) 10% /16px ? 10px round;这样？

追答

你加