关于CSS3borderimage的一些见解
当您看到这篇文章时，当您看到这篇文章时，请确保您是在opera或firefox或safari或chrom中浏览！CSS3的新特性borderimageimage、webkitborderimage、mozborderborderimage确实是一个非常棘手的属性，哥已经被这个CSS3新特性搞晕了，研究了近三天现实是一个非常棘手的属性研究了近三天现在总算悟出一些规则了。。这个borderimage虽说棘手但确实能够为前端工程师带来非常便利虽说棘手但确实能够为前端工程师带来非常便利，它允许你灵活的自定义元素的边框，且目前已经兼容Firefox、opera、webkitsafari灵活的自定义元素的边框webkitsafari、chrome。如果你正在Google上搜索相关的文章哥估计你应该也是被border上搜索相关的文章，borderimage搞晕了头啦，呵呵。好吧今天哥带你来体验一下css3新特性borderimage的怪异之处吧的怪异之处吧。首先我们来看看borderimage的语法：viewsourcepri
t1opera2borderimageuritoprightbottomleftx_repeaty_repeatimage3safari、chrome4webkitborderimageuritoprightbottomleftx_repeaty_repeatimage5firfoximage6mozborderimageuritoprightbottomleftx_repeaty_repeat每个参数的作用在此不多说了每个参数的作用在此不多说了一个borderimage至少包含了以下三部分至少包含了以下三部分：1、一个图片作为边框图片或者一个渐变色一个图片作为边框图片或者一个渐变色；2、边框图片的切割值，，将图片切割为9个部分；3、浏览器如何应用这些切割的部分到指定的元素浏览器如何应用这些切割的部分到指定的元素下面我们来看一张图片：：
这张PNG的图片的规格是4242，接下来的演示，我都将使用这张图片我都将使用这张图片。切割你的边框图片：viewsourcepri
t1border17px
f2width100px3height200px4webkitborderimageurlimagesborderp
g17stretch5borderimageurlimagesborderp
g40stretch6mozborderimageurlimagesborderp
g17stretch切割图片有四个值：上、右、下、左，你可以使用百分比定义切割的值，记住需要加个百分号，你也可以使用像素值定义切割的值，可笑的是当使用像素定义切割值时，不能加上”px”，呵呵，这可以算是一个悲剧。以上的样式将显示这样的结果：borderimage演示
记住当以百分比定义切割值时，百分数将依据边框图片的宽度，比如上面的40，40，记住当以百分比定义切割值时，百分数将依据边框图片的宽度，最终的值将是40乘以边框图片的宽度42等于168像素40乘以边框图片的宽度可能有的同学会问上面代码中的17px以及17和40从哪里来，为r