CSS边框图片说明

One of the more powerful new CSS properties, border-image is also one of the best supported, with the exception of (all together now) IE9. It is, unfortunately, also one of the most obtuse and difficult to understand.

一个更强大的新CSS属性， border-image也是支持最好的一个，与例外( 所有现在一起 )IE9。 不幸的是，它也是最晦涩难懂的一种。

The explanation of how

border-image works is perhaps best illustrated graphically. First, let's break down any border into its components: let's imagine an ormolu picture frame, divided up into nine tiles using two horizontal and two vertical lines. In the illustration to the right I've labeled the vertical divider lines V1 and V2, with H1 and H2 for the horizontal.

border-image工作原理。 首先，让我们将边界分解成各个组成部分：假设一个ormolu相框，使用两条水平线和两条垂直线分成9个图块。 在右图中，我标记了垂直分隔线V1和V2 ，其中水平分隔线为H1和H2 。

Rather than allowing you to specify a separate image for each part of a border, border-image insists that you create one image, with all the parts in place, and then slice that image up using CSS values that map to the positions of these lines.

border-image并非允许您为边框的每个部分指定单独的图像，而是坚持创建所有位置都正确的一个图像，然后使用映射到这些行的位置的CSS值对该图像进行切片。

Let's imagine that we're playing

Battleship, and reference each tile created by our divisor lines. The top left corner could be referred to as A1, the middle right section as B3, and so on. (The middle section, B2, will be ignored by the CSS after we specify the slices for our border image.) Where the slices are placed determines our tiles. A3 will always be placed as the top right corner image for our border; C2 will be used for the bottom edge, etc.

Battleship ，并引用由除数线创建的每个图块。 左上角可以被称为A1 ，右中角可以被称为B3 ，依此类推。 (在为边框图像指定切片之后，CSS会忽略中间部分B2 。)放置切片的位置确定了我们的图块。 A3将始终作为我们边框的右上角图像放置； C2将用于底部边缘等。

Let's consider the sides and top of our frame, because they have rather particular, and changeable, conditions. When we apply a border to an HTML element, we don't know how big the box will be. After they are applied to our border, our corner tiles will be unaffected by size changes, but the sides, top and bottom will definitely change. We have to make a decision about the tiles that will be placed there: will they repeat as the box gets bigger, or will they stretch? This consideration will have to be part of the design of our frame, and we'll have to specify our choice when it comes to writing our CSS.

让我们考虑一下框架的侧面和顶部，因为它们具有相当特殊且可变的条件。 当我们将边框应用于HTML元素时，我们不知道框的大小。 将它们应用到我们的边界后，我们的边角瓷砖将不受大小变化的影响，但是侧面，顶部和底部肯定会发生变化。 我们必须对将放置在其中的瓷砖做出决定：随着盒子变大，它们会重复出现吗？还是会拉伸？ 这种考虑必须成为我们框架设计的一部分，并且在编写CSS时我们必须指定我们的选择。

Finally, let's think about the lines that created our tiles: two horizontal, and two vertical. We need to tell CSS

where those imaginary divisors are, so that it can use the information to create the tiles. We could reference their positions as either percentages or pixels away from the corners. (I would suggest in most cases that the latter is easiest, except in the case of SVG images used for border image).

在哪里 ，以便它可以使用这些信息来创建图块。 我们可以将它们的位置称为距角的百分比或像素 。 (我建议在大多数情况下，后者是最简单的，除非将SVG图像用于边界图像)。

Note that the chevrons on the corners of this frame means that the slices must be large enough to include those details, which increases the size of our border, and will produce a physical “matte” effect inside the physical frame, which is actually realistic for a professional mounted photograph or painting. I’ve made the interior of the frame transparent, meaning that the background-color I specify will show through.

请注意，此帧角上的人字形意味着切片必须足够大才能包含这些细节，这会增加边框的大小，并将在物理帧内产生物理“遮罩”效果，这对于专业安装的照片或绘画。 我已经将框架的内部设为透明，这意味着我指定的background-color将显示出来。

The way in which the position of the divisors is measured and entered into the declaration is also odd: H2 is measured from the bottom of the image, H1 from the top, V1 from the left, and V2 from the right. They are entered into the declaration in this order:

测量除数的位置并将其输入到声明中的方式也很奇怪： H2从图像的底部开始测量， H1从顶部开始测量 ， V1从左侧开始测量 ， V2从右侧开始 。 它们按以下顺序输入到声明中：

border-image: url(image) H1 V2 H2 V1

Oddly, when the values are entered as pixels, they are not followed by a px suffix, unlike almost everything else in CSS.

奇怪的是，当值以像素形式输入时，它们后没有 px后缀，这与CSS中几乎所有其他内容都不一样。

The image is inserted into the page:

图像已插入页面：

<img src="teracotta-statue.jpg" alt="Terracotta Statue" class="frame">

And given the border image above, the CSS applied would be something like this:

鉴于上面的边框图像，所应用CSS将如下所示：

img.frame {
	border-image: url('frame.png') 93 92 87 92;
	background-color: #ffe;
}

(Note that this code won't work yet: there's a few things we have to add).

(请注意，此代码尚无法使用：我们需要添加一些内容)。

You have several choices as to how the sides are treated. stretch does exactly that; repeat will repeat the tiles to fit, and round is a hybrid of both, attempting to use complete versions of the tiles for the sides, but stretching where necessary.

您可以选择如何对待侧面。 stretch就是那样； repeat将重复贴砖以使其适合，并且round是两者的混合，尝试对侧面使用完整版的贴砖，但在必要时进行拉伸。

Importantly, you must also provide a separate, border-width declaration, to tell the browser how wide each side is so that the images can be fit in. Most resources will tell you that the dimensions used in border-width must be the same as those used for the position of the slices, i.e:

重要的是，您还必须提供一个单独的border-width声明，以告知浏览器每一侧border-width ，以便可以容纳图像。大多数资源会告诉您， border-width使用border-width必须与用于切片位置的那些，即：

border-width: 93px 92px 87px 92px;

But I've found that using a single border-width value will effectively scale the border dimensions:

但是我发现使用单个border-width值将有效缩放边框尺寸：

border-width: 60px;

Remember that you'll also need a plain border to fall back on should the image for the tiles not load or your visitors use IE: I'd suggest specifying a border approximating the thickness of the image tiles, and using its dominant color, with perhaps a lesser-used border-style thrown in.

请记住，如果未加载图块的图像或访问者使用IE，您还需要一个纯边框，以回退：我建议指定一个边界，使其近似于图像图块的厚度，并使用其主要颜色，也许是一种较少使用的border-style 。

So the complete code for the effect shown at the top of this page would be:

因此，此页面顶部显示的效果的完整代码为：

img.frame {
	border-image: url('frame.png') 93 92 87 92 stretch stretch;
	border-color: #f4be52;
	border-style: inset;
	border-width: 60px;
	width: 500px;
	height: 333px;
	background-color: #ffe;
}

设计技巧 (Design Tips)

I'd suggest using PNG images for borders where possible, due to the inevitable stretching and distortion that any image applied via border-image must endure. PNG-24 also provides the option of making parts of each tile transparent, which is important when you have large corner decorations on each corner, as in our ormolu frame example. Without transparency on the inner sections of the image, our border has the possibility of biting into whatever content is inside the box.

我建议在可能的情况下使用PNG图像作为边框，因为通过border-image图像应用的任何图像都不可避免地会发生拉伸和变形。 PNG-24还提供了使每个图块的一部分透明的选项，当您在每个角上都具有大的角装饰时(如我们的ormolu框架示例)，这非常重要。 如果图像内部没有透明性，我们的边界就有可能咬到盒子内部的任何内容。

Delightfully, box-shadow will continue to work as expected. Of course, the shadow will reflect the shape of the CSS box, not the frame per se; if the outside of your frame is irregular, you could create a realistic shadow by using a true drop shadow CSS filter or by altering the bitmap in an editor such as PhotoShop.

令人欣慰的是， box-shadow将继续按预期工作。 当然，阴影将反映CSS框的形状，而不是框架本身。 如果框架的外部不规则，则可以通过使用真实的阴影CSS滤镜或通过在PhotoShop等编辑器中更改位图来创建逼真的阴影。

I'd also suggest that you use guides, the marquee tool and the Info window to determine the measurements of the slices. Alternatively, you can use an online tool, like Kevin Decker's Border Image Generator, to create the CSS.

我还建议您使用辅助线，选取框工具和“ Info窗口来确定切片的尺寸。 或者，您可以使用在线工具(如Kevin Decker的Border Image Generator )创建CSS。

翻译自: https://thenewcode.com/438/CSS-Border-Image-Explained