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

📅  最后修改于: 2023-12-03 14:41:49.885000             🧑  作者: Mango

HTML | DOM 样式 borderImage 属性

介绍

borderImage 属性定义了一个已知宽高的元素的边框图像。

语法
border-image: source slice width outset repeat|initial|inherit;
属性值
  • source：指定用于创建边框图像的图像 URL。
  • slice：指定如何切割图像。
  • width：指定边框图像的宽度。
  • outset：指定边框图像与边框盒子边缘的距离。
  • repeat：指定边框图像如何平铺。
实例
<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 10px solid transparent;
  padding: 15px;
  border-image-source: url(border.png);
  border-image-slice: 30;
  border-image-repeat: round;
}
</style>
</head>
<body>

<h2>border-image</h2>

<div>这是一个border-image属性的实例</div>

</body>
</html>
实例解释

以上代码定义了一个 DIV 元素，它有一个可伸缩的图像边框。边框图像是由 "border.png" 文件创建的，它被切割成了 30 个像素，以便更好地适应边框盒子。

边框图像是通过 round 属性平铺的，这将使图像周围的边角变得更加平滑。

参考文献