html border线型属性值,CSS 属性 border

前言

border-image 是 CSS3 的一个属性，将图片规定为包围元素的边框，就像border定义边框那样，border只能简单的设置一些纯色或几种简单的线型(如solid,dotted,double,dashed等),而border-image使用图片来丰富包围的元素,给边框设置不同的图片效果。因为它是css3中的属性，所以在浏览器兼容方面我就不多说了，可以去 http://caniuse.com/输入对应属性查看具体兼容情况。

该属性可用来给需要背景元素设置可拉伸的背景效果，例如对话框等，在内容变化的情况下背景自动跟着拉伸。

语法1border-image ： none | [ | ]{1,4} [ / {1,4} ]? [ stretch | repeat | round ]{0,2}

border-image 属性是一个简写属性，用于设置以下属性：border-image-source —— 用在边框的图片的路径

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

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

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

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

简单的来介绍一下border-image的参数:none: 是border-image的默认值，如果取值为none时，表示边框无背景图片；

：设置border-image的背景图片，这个跟background-image一样，使用绝对或相对的url地址，来指定背景图片；

：number是一个数值，用来设置边框的宽度，其单位是px，其实就像border-width一样取值，可以使用1~4个值，其具体表示四个方位的值，大家可以参考border-width的设置方式；

：percntage也是用来设置边框的宽度，跟number不同之处是，其使用的是百分比值来设置边框宽度；

stretch,repeat,round: 用来设置边框背景图片的铺放方式，类似于background-position，其中stretch是拉伸，repeat是重复，round是平铺，stretch为默认值。

border-image-source1border-image-source:url(image url);

border-image-source跟background-image属性相似，也是通过url()调用背景图片，图片的路径可以是相对地址也可以是绝对地址，当然你不想使用背景图片你也可以把值设置为none，即：border-image:none；其默认值就是none。

border-image-slice1border-image-slice:[ | ]{1,4}&& fill?

border-image-slice是用来分解引入进来的背景图片，这个参数相对来说比较复杂和特别。四个参数类似于margin,padding那样遵从【top,right,bottom,left】的规则。

如：一个81px的正方形位图,9个菱形图案,每个菱形图案为27*27px。假如给定这个属性值:

1border-image-slice:27 27 27 27;

它代表的意思是距离顶部内偏移区域27px处横切一刀:

接着距离右侧内偏移区域27px竖切一刀:

接着距离底部内偏移区域27px竖切一刀:

接着距离左侧内偏移区域27px竖切一刀:

那么给定图像切片border-image-slice:27 27 27 27;完整动态图如下:

*值得注意的是，按照上面的四个值切除之后，图片中间部分默认情况下是为空的。如果需要中间部分按照图片原本中间部分填充的话，需要在第4个值后面再加上fill值。1border-image-slice:27 27 27 27 fill;

border-image-width1border-image-width:[ | | | auto ]{1,4}

border-image-width就是border-width，用来设置边框的宽度。

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

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

border-image-outset1border-image-outset:[ | | none ]{1,4}

border-image-width用来设置边框图片向外延伸。遵循【top,right,bottom,left】的方位原则。

其他

关于更多的用法例子可自行搜索。如该文章有误，请在评论里提出，谢谢！