cssborder CSS3的border-image属性详解

边框图像是CSS3的一个属性。今天我们来分析一下这个属性的一些特点，方便大家以后在使用中遇到困难！

边框图像使简单的工作变得复杂。学习这个属性后发现，应用这个属性可以大大节省编码时间和效率。综上所述，一般适用于以下两种场景:

元素的不规则边界。这时候就需要用设计图作为边框的背景。与背景图像相比，边框图像的优点是更灵活，可以使用代码来控制边框背景的拉伸和重复，从而可以创建更多样的效果

按钮的宽度和高度是不确定的。使用边框图像制作按钮，可以使用相同的背景图像制作不同宽度和高度的按钮。

边界图像属性分析

边框背景图片。格式为:URL(“…”)。

边缘图像切片

图片边框向内偏移的距离。格式:边框-图像-切片:右上角左下角。分别指切割背景图片的四条线从右上角到左下角的距离。如下图所示:

拉伸(默认)

可以看出，每个区域被横向和纵向拉伸

重复

可以看出，背景与原形状等比例缩放后连续平铺，容易出现断层。

圆形的

也是重复平铺，但是圆会更平滑，不会出现断层，所以圆通常比重复更常用。