不久前，只需在网页上的图像中添加装饰元素（例如花哨的边框）并耐心地调整CSS文件，就可以让您的网页看起来不错。但现在CSS有了改变，用复杂的边框装饰你的网站只需要几行代码。这篇文章将告诉你如何！边框图像属性（BorderImageProperties）设计边框最常用的方法是使用预设的边框样式属性值。包括：点线、虚线、实线、双线、凹槽、脊线、插图和开始。这些样式已经为您提供了很多选择。但您可以更进一步，使用以下CSS属性为您的边框添加有吸引力的背景图像。border-image-source属性使用此属性，您可以将背景图像分配给元素的边框。这个值通常是图片的URL：element{border-image-source:url('myimage.png');}你会发现CSS渐变也可以：element{border-image-source:linear-gradient(10deg),#fe01f50%,#2e113d100%);}在浏览器中是这样的：如果将属性值设置为none，则图片不会显示，浏览器会使用属性border-style的值。因此，border-style作为后备选项是个好主意！值得一提的是，您使用的图片不需要匹配边框的宽度和高度。一张小图片可以装点您的网站。例如，例子中的元素可以任意调整其图片的大小，并能自动识别大小以适应屏幕。border-image-slice属性使用border-image-source属性选择图像后，您可以应用border-image-slice属性。element{border-image-slice:19;}该属性指定图片的上、下、左、右边缘向内偏移，将图片分为九个区域：四个角、四个边、一个中间区域。您最多可以指定四个数字或百分比作为值。当您指定四个值时，其应用顺序为上、右、下、左。如果省略左偏移值，则左值将默认与右值相同。如果省略下面的值，它将默认为与上面相同。但是如果你省略了正确的偏移值，它将默认为与上面相同的值。如果您只使用一个值，则该值将应用于所有偏移值。相对于图像大小的百分比值-图像宽度影响水平偏移，高度影响垂直偏移。数值表示图像像素或矢量坐标。此外，不要在数字后添加px，否则此属性将不起作用。下面是一个如何使用border-image-slice属性的例子：bg.png);border-image-slice:19;}使用一张100x100px的图片：最终渲染图大致是这样的：中间区域不可见透明。如果要保留边框图像的中间部分，请使用关键字fill。例如，使用中间区域的图像，如果使用关键字填充，您将得到上面的图像。但是如果你使用这个：.box{border:19pxdotted#c905c6;border-image-source:url(border-fill.png);border-image-slice:19fill;}中间区域的图像会出现：有点blurrythough,imagelookscompressed,buttheimageinmiddleareaisvisible:border-image-widthattribute这个属性会在里面绘制所谓的突兀边框区域，边框的默认区域是borderbox，就像属性border-image-slice一样，属性border-image-width指定内部分为九个区域。同样，该属性的四个指定值可以用数值或百分比来表示上、右、下、左量。百分比是指图像区域大小，图像宽度影响水平偏移，高度影响垂直偏移。如果你使用一个值，它的用法和border-width一样。例如：.box{border:19pxdotted#c905c6;border-image-source:url(border-bg.png);border-image-slice:19;border-image-width:3;}...设置边框(border)图片宽度是border-width值的三倍，19px。结果是这样的：我发现如果给border-image-width和border-image-slice属性赋相同的值，这样可以确保你的边框图像处于最佳状态，不会模糊和扭曲。border-image-outset属性到目前为止，我使用默认值来插入图像并为图像区域加边框。实际上，您还可以选择将边框图像放置在borderbox区域之外。这时候可以使用border-image-outset属性。同样，该属性的四个指定值可以用数值或百分比来表示上、右、下、左的数量，其输出的用法与border-width相同。为了更清楚的说明，我用绿色的虚线来表示borderbox区域，用粉色的图片来表示。边框图像区域。默认情况下，边框图片在绿色区域，也就是说边框图片区域在borderbox区域内。添加border-image-outset:19px到CSS文件；粉红色部分会在绿色部分之外，这表明边框图像在borderbox区域之外。请注意，边界框外的图像部分不会触发滚动，也不会捕获鼠标事件。您可以尝试我们已经在CodePen上讨论过的一些属性：border-image-repeat属性此属性提供有关如何扩展和布置边框图像的边缘和中间的选项。第一个值指定水平边距（顶部和底部），第二个值指定数字边距（左侧和右侧）。如果您只提供一个值，则该值将应用于所有边。一些可用的值：stretch-如果你不使用border-image-repeat属性的默认值。它的属性拉伸图像以填充该区域。repeat–平铺图像以填充该区域。如果可用区域area不能被图片块整除，则可以裁剪图片。round–与repeat相同，但如果可用区域不适合图像块，它将自动缩放图像直到适合。这导致图片不会被裁切，但图片可能看起来略微失真。space-与repeat相同，但如果空间不完全适合图像，额外的空间将分布在图像周围。写作时，使用火狐浏览器会导致空格和拉伸效果相同，使用谷歌浏览器会导致空格和重复效果相同。border-imageShorthand属性总结了我们上面学习的关于border-image属性的各个属性，如下所示：border-image-sourceborder-image-sliceborder-image-widthborder-image-outsetborder-image-repeatsmall示例：element{border-image:url(myimage.png)19/19px/0round;}在CodePen演示页面上自己尝试border-image-repeat和border-image属性。如果我想删除边框图像怎么办？最好的方法是使用borderShorthand属性来重置边框。使用borderShorthand属性，您可以快速将四个边重置为相同的宽度、相同的颜色和相同的样式。无需指定border-image:none，也无需覆盖任何单独的border-image属性。浏览器支持在撰写本文时，大多数浏览器都支持border-image。只有Firefox不能拉伸SVG图片，OperaMini不能支持单独使用的属性，除非使用时加上-o-前缀。总而言之，这篇文章是关于属性border-image的：它的值，如何以最佳方式使用它们，以及哪些浏览器支持它们。如果想了解更多细节，可以查询CSSBackgroundsandBordersLevel3。翻译链接：http://www.codeceo.com/article/css-border-image-website.html英文原文：DecoratingtheWebwithCSSBorderImages
