当前位置 : 主页 > 网页制作 > css >

border-image

来源:互联网 收集:自由互联 发布时间:2021-06-13
border-image是一种简写属性,可让您使用图像或CSS渐变作为元素的边框。 .module { border-image: url(border.png) 25 25 round;} 当border-collapse设置为collapse时,border-image属性可以应用于任何元素,但内

border-image是一种简写属性,可让您使用图像或CSS渐变作为元素的边框。

.module {
  border-image: url(border.png) 25 25 round;
}

当border-collapse设置为collapse时,border-image属性可以应用于任何元素,但内部表格元素(例如tr,th,td)除外。

属性

border-image唯一必需属性的简写是border-image-source。 如果未指定,则其他属性默认为其初始值。 这些是按顺序排列的边框图像属性:

border-image-source

.module {
  border-image-source: url(border.png);
}

  

此属性指定边框图像的来源。 这可以是URL,数据URI,CSS渐变或嵌入式SVG(尽管对嵌入式SVG的支持受到限制,请参阅SVG使用说明)。

初始值为none。

border-image-slice

.module {
  border-image-source: url(border.png);
  border-image-slice: 20;
}

  

此属性的值告诉浏览器在哪里“切片”图像以创建边框。 图像分为9个部分-四个角,四个边和中心。

带有以红色标记的切片线的边框图像(放大以显示细节)。

该属性最多接受四个正的无单位数字或百分比,以及一个可选的fill关键字。 初始值为100%。

无单位数字通过光栅图像上的像素和SVG上的坐标来测量切片。 百分比值是相对于图像尺寸的。 例如,在100px x 100px的光栅图像上,距图像任何一侧的10%为10px。 有关百分比如何在SVG图像上工作的更多信息,请参见SVG上的使用说明。

这些值从图像的顶部,右侧,底部和左侧边缘开始测量(按此顺序)。 如果缺少一个值,则其值将默认为其另一侧的值-例如,如果缺少左侧的值,但右侧的值设置为10px,左侧的值也将变为10px。

默认情况下,源图像的中心被丢弃。 但是,当使用fill关键字时,它将改为应用于边框元素的背景。(注:仍然可以使用background-image属性,该属性产生的背景图片位于由fill关键字产生的“背景图片”的下方,会被"fill背景图片"覆盖掉一部分。)

border-image-width

.module {
  border-image-source: url(border.png);
  border-image-slice: 20;
  border-image-width: 20;
}

  

此属性设置边框图像的宽度。 它接受百分比值,无单位正数或关键字auto。

这些值用于元素的顶部,右侧,底部和左侧(按此顺序)。 如果缺少一个值,则将其绘制为对立边的值。

对于此属性,百分比值是相对于边框图像区域的大小而言的,而无单位数则乘以边框宽度(border-width)。

初始值为1,因此,如果未设置此值,但是元素具有边框或边框宽度声明,则将以该宽度绘制边框图像。

auto关键字告诉浏览器使用border-image-slice的大小(如果可用)或border-width的大小。

border-image-outset

.module {
  border-image-source: url(border.png);
  border-image-slice: 20;
  border-image-width: 20;
  border-image-outset: 1;
}

  

此属性的值指定边框图像区域超出边框超出的距离。 初始值为0。该属性最多接受四个正长度值或无单位数。 长度值是绝对测量值,而无单位数与边框宽度相乘以计算初始值,类似于无单位数对边框图像宽度的工作方式。

border-image-repeat

.module {
  border-image-source: url(border.png);
  border-image-slice: 20;
  border-image-width: 20;
  border-image-outset: 1;
  border-image-repeat: round;
}

  

此属性控制如何重复图像以填充边框区域。

您最多可以为此属性指定两个值。 如果指定了一个值,则将其同时应用于边框的水平和垂直边。 如果指定了两个,则第一个应用于水平侧,第二个应用于垂直侧。

stretch:初始值。 根据需要拉伸边框图像以填充该区域。

repeat:图像平铺以填充该区域,并在必要时划分平铺。

round:图像平铺以填充该区域,并在必要时进行重新缩放以避免划分平铺。当不能整数次平铺时,根据情况放大或缩小图像。

space:图像平铺以填充该区域。 如果无法用整个图片方块填充该区域,则在图片方块周围插入空间以保持均匀。 注意:此值尚未由任何浏览器实现。当不能整数次平铺时,会用空白间隙填充在图像周围(不会放大或缩小图像)。

尝试在此演示中使用不同的border-image-repeat值(包含空格仅出于将来的兼容性;目前尚无法在任何浏览器中指定该空格):

边框图像使用渐变

所有支持边框图像的浏览器也都支持CSS渐变。 您可以使用任何类型的渐变来制作边框。 此演示演示了重复的线性渐变,形成了条纹边框(将其悬停以查看条纹颜色交换)。

浏览器将对渐变进行切片,就像对宽度和高度等于border-image-width的正方形图像进行切片一样。

边框图像使用SVG

将光栅图像和SVG用于border-image之间的最大区别在于切片的测量方式。

无单位值表示SVG图像上的坐标。

百分比值是相对于图像大小的。

如果SVG没有定义的尺寸,则使用默认的尺寸调整算法对其进行尺寸调整,该算法将使用border-image-outset设置的边框图像区域作为默认尺寸。 在实践中这可能会造成混淆,因此在可能的情况下为SVG设置大小会有所帮助。

图片来源URL中的SVG

您可以将SVG文件链接作为border-image-source,就像链接光栅图像一样:

.module {
  border-image-source: url(border.svg);
}

  

这可能是将SVG用作边框图像的最佳方法。 它得到了很好的支持-所有支持border-image的现代浏览器都接受链接SVG作为border-image-source的值。

内联

您可以对SVG边框图像进行Base64编码,也可以将SVG标记直接写入边框图像源,但是这两种方法都存在相当大的问题。

Base64 SVG有很多问题值得推荐:也许不要Base64 SVG。

将SVG图像标记直接写入border-image声明中也很复杂; Internet Explorer无法识别它,并且在Firefox中的支持很奇怪(请参阅Bug 619500)。

本演示中的边框图像是嵌入式SVG渐变。 如果您查看“ CSS”选项卡,您会注意到标记必须精心组合-请注意标记周围的双引号,标记内的单引号以及十六进制颜色的转义“井”(#)字符。

制作单个重复图像的边框

用一个单一的重复图像为元素加上边框似乎很容易,因为它具有称为border-image的属性,但是实际执行此操作的过程有些违反直觉。

举例来说,假设您想将元素环绕重复的心形图标。 你无法做到只有一颗心的图像。 相反,您必须制作一个心形“框架”的图像,并按照您希望它们出现在边框中的顺序排列,然后对该图像进行切片。

“框架”图像中的八个心形,放大以显示细节。 红线表示切片。

如果您认为这听起来很荒谬,那么您此道不孤。 几年前,埃里克·迈尔(Eric Myer)的博客上对该主题进行了长篇的论述,许多前端开发专家对此进行了讨论。

在此演示中,心脏围绕div的边界重复。border-image-source是八个相同心脏图标的合成图像,将它们切成切片,以便在元素的每一侧使用完整的心脏形状。

更多使用说明

尽管对border-image的支持已得到改进(当前所有浏览器版本均未提供前缀支持),但仍然需要设置回退border样式。回退border将显示在不支持border-image的浏览器中,或者如果该图像无法加载。

与其他某些边框属性不同,border-image无法设置动画。 也不能使用border-radius设置样式。

如果声明一个border-image-source和一个没有任何切片的border宽度或border-image-width,则整个未切片的图像将放置在元素的四个角,并缩放到指定的宽度。

网友评论