/* border-image-slice: slice */
border-image-slice: 30%;
/* border-image-slice: horizontal vertical */
border-image-slice: 10% 30%;
/* border-image-slice: top horizontal bottom */
border-image-slice: 30 30% 45;
/* border-image-slice: top right bottom left */
border-image-slice: 7 12 14 5;
/* border-image-slice: … fill */
/* The fill value can be placed between any value */
border-image-slice: 10% 32 7 12 fill;
/* Global values */
border-image-slice: inherit;
border-image-slice: initial;
border-image-slice: unset;
之前一段时间在做游戏,在游戏中,经常需要用到九宫图,用九宫图可以保证图片的边框不会因为拉伸而走形。在 CSS3 中也有对九宫图的支持 —
border-image
。接下来就去说下它。语法
border-image-source
这个没啥好说的...,真要说下,就是可以设置 base64。
border-image-slice
这个可以好好唠个10块钱的了,先来找图,估计你看了也就明白了:
border-image-slice
就是去控制九宫图是怎么切的,根据上图,其中:语法
单位相关
px
(只支持px
和%
)border-image-source
图片的大小fill
指的是:图片中间部分是否需要保留,一般在游戏那样的场景中,中间部分会选择保留。如果不没有fill
,如果有background
就显示background
。100px
,border-image-slice: 10% 60px;
,最后将会渲染出奇奇怪怪的东西border-image-width
这个可以聊5块钱,就是去设置图片边框的宽度的,顺时针上右下左。一般来说,
border-image-width
和border-image-slice
的值是设置相同的(非百分比,因为border-image-width
百分比是相对于盒子的高宽的),但是border-image-width
和border-image-slice
也可以设置的不同,不同的效果就是将border-image-slice
切出来的边框塞到border-image-width
再进行拉伸或缩放,什么意思:就是将slice
出来的1、2、3、4、5、6、7、8块东东再拉伸或者缩放成border-image-width
的大小。再简单的说,就是
slice
出来的东西,填充到border-image-width
的空间里!!!并撑满!因此利用这个特性,我们可以模拟高清屏幕的
1px
边框:1px
,然后往里切割2px
,然后在设置border-image-width
为1px
但是,这是一个极其傻的 hack 方式,因为边框它是去模拟边框,虽然修复了高清
1px
的问题,但是边框颜色并不能设置了。PS:偷懒的高清
1px
边框方案:https://github.com/lishengzxc/bblog/issues/2除此以外,
border-image-width
的值可以设置的很大,但是设置很大话,又是奇奇怪怪的东西,虽然它也是有一定规则的,但是我不想去了解了(任性,以后要去好好研究看看)。border-image-outset
这个是用来设置边框图像可超出边框盒的大小。MDN上说是可以有设置百分比的代码DEMO,但是似乎并运行不起来。也不支持负值。
设置了
border-image-outset
并不会改变最后盒子的大小。border-image-repeat
默认值:
stretch
round
repeat
说实话,
stretch
是最常用的。