CSS3边框图像

Question

我有四个单独的图像，每个图像 20px x 20px，我想在每个边框侧显示每个图像。有代码片段吗？我的目标平台是 FF 3.6+ 和 Safari 5+。

使用CSS3和HTML5。

Answer 1

您可以使用：

/* Shorthand */
border-image:url('top.png') url('right.png') url('bottom.png') url('left.png');

或者长的方式：

/* Long way */
border-top-image:url('...');
border-right-image:url('...');
border-bottom-image:url('...');
border-left-image:url('...');

Answer 2

似乎不可能为 border-image 属性使用多个图像。

但是，您仍然可以使用 border-image，只需创建一个所有四个边合二为一的图像即可。

看这里的示例： http://www.w3.org/TR/ css3-background/#border-images

border-image 获取图像的 url，然后是四个大小，即要使用的图像切片大小。
第一个值用于左上角，第二个值用于右上角，依此类推。
使用

border-image: url("border.png") 20 20 20 20 repeat;

will cut 的左上角 20x20 像素作为 div 的左上角，det 右上角 20x20 像素作为 div 的右上角，依此类推。