css border属性_CSS3 Border-Image属性：使照片真的很酷！

本文是我们的“ HTML5 / CSS3教程系列”的一部分 -致力于帮助您成为更好的设计师和/或开发人员。 单击此处查看同一系列的更多文章。

在HTML和CSS中创建边框并不是什么新东西; 从一开始我们就可以添加边框。 您可能已经熟悉实线边框，虚线边框，虚线边框等。

但是，有了新的CSS3 border-image属性 ，在HTML元素上创建边框变得更加先进。 好吧，简单地说，我们现在能够使用图像作为源添加边框，这将使我们能够添加更具吸引力的边框。 好吧，现在让我们看看这个属性是如何工作的。

语法和浏览器支持

CSS3中的边框图像是使用以下速记语法定义的：

border-image: [image source] [slice] [width] [outset] [repeat];

上面的语法是W3C的正式版本，仅在Chrome中受支持，而Opera，Firefox和Safari仍需要带前缀的版本（ -moz- -o- ，- -moz-和-webkit- ），Internet Explorer并不奇怪完全支持此属性。

此外， 任何浏览器 尚不支持 border-image属性中的[width]和[outset]值，但是可以使用border-width属性替换width值。

因此，简而言之，目前我们只能应用[image source] ， [slice]和[repeat] 。

border-image: [image source] [slice] [repeat];

图像切片

在继续演示此属性之前，让我们先谈谈“图像切片”，因为它是声明属性的新内容。 此处的图像切片将定义图像的剪切部分，该剪切部分分别从图像边缘的顶部，右侧，底部和左侧开始，然后还将图像分为九个部分，如下图所示。

在上面的图像，你将看到第1，第3，第7和9将成为边界的角部，以及第2，第4，6和8将成为边界边缘或线，确保该部分，在那里它将变成可重复或可拉伸的边缘。

可以使用像素单位或百分比（％）单位声明切片的值，以进行灵活的测量。

更多参考：

• CSS背景和边框级别3

创建相框

现在，让我们在一个真实的示例中演示该属性。

这次，我们将实现border-image属性以创建相框，并且我们将使用下面的图像作为源。 我们已经仔细测量了图像，因此无论内容的宽度和高度如何，都可以对其进行适当的切片，重复和拉伸。

另外，在本演示中，我们将使用《从我到你》中这张令人惊叹的电影胶片作为照片。

标记

标记很简单：

<div class="wrapper">
	<img src="path/photo.jpg">
</div>

不要忘记用自己的照片替换path/photo.jpg 。

风格

然后，让我们使用border-image给它一个框架。

如果您看上面的图片，我们的图片宽度总计为180px 。 然后，可以将该值划分为6 ，每个划分为30px ； 所以我们将图像切成30px 。

如果对切片使用长度值，则应排除px单位，因为它将自动转换为像素 ，但是如果决定使用百分比，则仍需要添加（％） 。

至于图像重复，我们将使用默认值。 repeat 。 另外，您可以使用stretch ，不必担心，边框图像仍然看起来很优美。

img {
	border-image:url("images/frame.png") 30 repeat;
	-o-border-image:url("images/frame.png") 30 repeat;
	-moz-border-image:url("images/frame.png") 30 repeat;
	-webkit-border-image:url("images/frame.png") 30 repeat;

	border-width: 30px;
}

此外，我们还希望将图像放置在浏览器窗口的中心，并为文档添加背景纹理以使其更具吸引力。

html {
	background: url('images/lightpaperfibers.png');
}
.wrapper {
	margin: 20px auto;
	height: 476px;
	width: 675px;
	text-align: center;
}

好吧，我想我们已经完成了，现在让我们在浏览器中查看它。

• 演示版
• 下载源

您是否觉得自己正在看霍格沃茨的一幅魔术画？

最后的想法

毫无疑问，此border-image是CSS3系列中的一个不错的补充。 我们不再局限于简单的纯边框。

在这篇文章中，我们向您展示了如何创建图像框架而无需担心内容或在这种情况下照片的尺寸（宽度和高度）。 只要边框源是可重复的或可拉伸的，其高度和宽度就可以是灵活的。

最后，如果您对border-image仍然不满意，可以使用一种工具来帮助您更轻松地创建一个： border image工具

翻译自: https://www.hongkiat.com/blog/css3-border-image/