HTML DOM 样式 borderImageOutset 属性

htmlweb developmentfront end technology更新于 2025/9/21 11:24:17

HTML DOM 样式 borderImageOutset 属性用于设置或返回背景图像区域相对于元素边框的延伸值。通过使用 top、left、right 和 bottom 的值，我们可以指定背景图像相对于元素相应边框的延伸量。

语法

以下是语法 −

设置 borderImageOutset 属性 −

object.style.borderImageOutset = "length|number|initial|inherit"

属性值解释如下 −

值	描述
Length	用于定义图片从边框延伸的距离。默认值设置为 0，即不超出边框。
Number	用于定义边框宽度的倍数。
Initial	用于将此属性设置为初始值。
Inherit	用于继承父级属性值

示例

让我们看一下 borderImageOutset 属性的示例 −

<!DOCTYPE html>
<html>
<head>
<style>
   #P1 {
      border: 20px solid transparent;
      margin: 20px;
      border-image: url("https://www.cainiaomax.com/tensorflow/images/tensorflow.jpg") 30
      round;
      border-image-outset: 5px;
      background-color: lightgreen;
   }
</style>
<script>
   function changeBottomOutset(){
      document.getElementById("P1").style.borderImageOutset="20px";
      document.getElementById("Sample").innerHTML="The border image outset is now
      increased";
   }
</script>
</head>
<body>
<h2>Demo Heading</h2>
<p id="P1"> This is a sample paragraph containing some text. This paragraph is created only for the sake of this example</p>
<p>Change the above div border image outset by clicking the below button</p>
<button onclick="changeBottomOutset()">Change Bottom Outset</button>
<p id="Sample"></p>
</body>
</html>