📌  相关文章
📜  HTML | DOM 样式 borderImageOutset 属性(1)

📅  最后修改于: 2023-12-03 15:31:13.434000             🧑  作者: Mango

HTML | DOM 样式 borderImageOutset 属性

简介

borderImageOutset 属性规定边框图像区域超出边框盒的量。

该属性仅适用于使用边框图像的元素，而不是标准 border 属性的元素。

语法
<style>
  element {
    border-image-outset: length|number|initial|inherit;
  }
</style>

属性值说明:

  • length: 定义边框区域超出边框盒的长度（可以为负数）。
  • number: 可以使用“number”来作为“length”的简写。边框区域将使用该元素的边框宽度的倍数。
  • initial: 设置该属性为默认值。
  • inherit: 继承父元素的 border-image-outset 属性值。
示例
<!DOCTYPE html>
<html>
  <head>
    <style>
      img {
        border: 10px solid transparent;
        border-image: url(border.png) 30 30 round;
        border-image-outset: 20px;
      }
    </style>
  </head>
  <body>
    <img src="https://via.placeholder.com/150" alt="example">
  </body>
</html>
解释

在上面的例子中，我们设置了一个 img 元素的 border-image 为一个名为 border.png 的图像，它将在边框周围布满圆形。然后，我们设置 border-image-outset 为 20px，表示边框图像区域将延伸 20px 超出边框盒子。

浏览器支持性

borderImageOutset 属性在所有主流浏览器中得到支持。

总结

borderImageOutset 属性允许您为使用边框图像的元素定义边框图像的区域超出边框盒的大小。但它只能用于为元素创建的自定义边框，而不是标准的 border 属性。