《图解CSS3——第3章 CSS3边框-3》

标签：blocks   markdown   block   实际应用   github   round   百分比   方法   tput   

3.3 CSS3图片边框属性

border-image效果在CSS2中，只有使用背景图片来制作，而且制作过程非常复杂，做完后也很难维护。如今CSS3中增添了一个图片边框的属性，能够模拟出background-image属性的功能，功能比background-image强大，我们可以使用border-image属性给任何元素（除border-collapse属性值为collapse的table元素之外）设置图片效果边框。

3.3.1 border-image属性的语法及参数

border-image : none | <image> [<number> | <percentage>] {1, 4} [/ <border-width>] {1, 4} ] ? [stretch | repeat | round] {0, 2}

• none：默认值，表示边框无背景图片。
• <image>：设置背景图片，这跟background-image一样，可以使用绝对或相对的URL地址，来指定边框的背景图片。
• <number>：number是一个数值，用来设置边框或者边框背景图片的大小，其单位就是像素(px)，可以使用 1~4 个值，表示4个方位的值，可以参考 border-width的设置方式
• <percentage>：percentage也是用来设置边框或者边框背景图片的大小，跟number不同之处是，percentage使用的是百分比。
• stretch、repeat、round：这三个属性参数是用来设置边框背景图片的铺放方式，类似于background-repeat，其中stretch会拉伸边框背景图片、repeat是会重复边框背景图片、round是平铺边框背景图片，其实stretch为默认值。

border-image和background-image之间有一些类似之处，包括图片的引用和排列方式。

3.3.2 border-image属性使用方法

• 引入背景图片：border-image-source。
• 切割引入北京图片：border-image-slice。
• 边框图片的宽度：border-image-width。
• 边框背景图片的排列方式：border-image-repeat。

1、border-image-source

语法：

border-image-source : url(image url);   //image url可以是相对地址也可以是绝对地址。

2、border-image-slice

语法：

border-image-slice : [<number> | <percentage>] {1, 4} && fill ?

border-image-slice是用来分解引入进来的背景图片。

1) 取值支持 <number> | <percentage>。其中number是没有单位的，因为其默认的单位就是像素。除了直接用number来设置外，还可以使用百分比值来表示，即相对于边框背景图片而言的。

2）剪切的特性(slice)。在border-image中slice是一个关键部分，也是让人难以理解的部分。

这里可以参考w3cplus border-image了解更多。

3、border-image-width

语法：

border-image-width: [ <length> | <percentage> | <number> | auto ]{1,4} 

border-image-width就是border-width，用来设置边框的宽度，我们也可以直接用border-width来代替border-image-width的。

4、border-image-repeat

语法：

border-image-repeat: [ stretch | repeat | round ]{1,2} 

border-image-repeat是用来指定border-image的排列方式，这个属性设置参数和其他的不一样，border-image-repeat不遵循top,right,bottom,left的方位原则，他只接受两个（或一个）参数值，第一个表示水平方向，第二个表示垂直方向；当取值为一个值时，表示水平和垂直方向的排列方式相同。同时其默认值是stretch，如果你省略不取值时，那么水平和垂直方向都是以stretch排列。

上面我们把border-image像background-image一样分解开给大家介绍了其相关的知识点，但是在实际应用中，我们不是能分解的，必须写在一起，如果大家细心的话，从上面那些简单实例中就能发现，下面我将其正确的速记法列出来以供大家参考

border-image:<‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’>] || <‘border-image-repeat’>

3.3.3 浏览器兼容性

3.3.4 border-image属性的优势

略

3.3.5 实战体验：按钮圆角阴影效果

略（p100-p105） 太长了/(ㄒoㄒ)/~~ 有兴趣的可以到这里学习参考

《图解CSS3——第3章 CSS3边框-3》

标签：blocks   markdown   block   实际应用   github   round   百分比   方法   tput   

原文地址：http://www.cnblogs.com/baixc/p/6166328.html