转载

border-image-*

之前一段时间在做游戏,在游戏中,经常需要用到九宫图,用九宫图可以保证图片的边框不会因为拉伸而走形。在 CSS3 中也有对九宫图的支持 — border-image 。接下来就去说下它。

语法

<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

border-image-source

这个没啥好说的...,真要说下,就是可以设置 base64。

border-image-slice

这个可以好好唠个10块钱的了,先来找图,估计你看了也就明白了:

border-image-*

border-image-slice 就是去控制九宫图是怎么切的,根据上图,其中:

  • 1、2、3、4是绝对不会被拉伸了
  • 5、7会被横向拉伸
  • 6、8会被纵向拉伸
  • 9横向纵向都拉伸

语法

/* 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;

单位相关

  • 不加单位相当于 px
  • 百分比相对于 border-image-source 图片的大小
  • 关键字 fill 指的是:图片中间部分是否需要保留,一般在游戏那样的场景中,中间部分会选择保留。如果不没有 fill ,如果有 background 就显示 background
  • 相对的两个放下的值相加超过图片的大小会出现错误,比如图片宽度是 100pxborder-image-slice: 10% 60px; ,最后将会渲染出奇奇怪怪的东西
  • 不支持负值

border-image-width

这个可以聊5块钱,就是去设置图片边框的宽度的,顺时针上右下左。一般来说, border-image-widthborder-image-slice 的值是设置相同的(非百分比,因为 border-image-width 百分比是相对于盒子的高宽的),但是 border-image-widthborder-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 边框:

  1. 准备一个图片边框,这个图片有颜色(灰色)的边框

    border-image-*
  2. 图片里面黑色的上下两块在画的时候设置为 1px ,然后往里切割 2px ,然后在设置 border-image-width1px

<style> .border-image-1px {   border-width: 1px 0px;   border-image: url("border.jpg") 2 0 stretch; } </style> <div class="border-image-1px"></div>

但是,这是一个极其傻的 hack 方式,因为边框它是去模拟边框,虽然修复了高清 1px 的问题,但是边框颜色并不能设置了。

PS:偷懒的高清 1px 边框方案:#2

除此以外, border-image-width 的值可以设置的很大,但是设置很大话,又是奇奇怪怪的东西,虽然它也是有一定规则的,但是我不想去了解了(任性,以后要去好好研究看看)。

border-image-outset

这个是用来设置边框图像可超出边框盒的大小。MDN上说是可以有设置百分比的代码DEMO,但是似乎并运行不起来。也不支持负值。

同时设置了 border-image-outset 并不会改变最后盒子的大小。

border-image-repeat

默认值: stretch

border-image-*

.example {    border-image:url("/files/4127/border.png") 30 30 stretch; }

round

border-image-*

.example {    border-image:url("/files/4127/border.png") 30 30 round; }

repeat

border-image-*

.example {    border-image:url("/files/4127/border.png") 30 30 repeat; }

说实话, stretch 是最常用的。

原文  https://github.com/lishengzxc/bblog/issues/10
正文到此结束
Loading...