HTML DOM 样式 borderImage 属性

htmlweb developmentfront end technology更新于 2025/10/2 8:12:17

borderImage 属性用于设置或获取元素的边框图像。它是一个简写属性，因此我们可以一次性操作 borderImageSource、borderImageSlice、borderImageWidth、borderImageOutset 和 borderImageRepeat 属性。

语法

以下是语法 −

设置 borderImage 属性 −

object.style.borderImage = "source slice width outset repeat|initial|inherit"

值

属性值解释如下 −

Sr.No	值 &描述
1	borderImageSource 指定用作边框的图像路径。
2	borderImageSlice 指定图像边框向内的偏移量。
3	borderImageWidth 指定图像边框宽度。
4	borderImageOutset 指定边框图像区域超出边框的范围。
5	borderImageRepeat 指定图像边框应为圆角、重复或拉伸。
6	initial 将此属性设置为初始值。
7	inherit 继承父级属性值

示例

让我们看一个 borderImage 属性的示例 −

<!DOCTYPE html>
<html>
<head>
<style>
   #PARA1 {
      border: 15px solid transparent;
      padding: 12px;
      border-image: url("http://www.tutorialspoint.com/images/blockchain.png") 20 stretch;
      width: 100px;
   }
</style>
<script>
   function changeBorderImage(){
      document.getElementById("PARA1").style.borderImage="url('http://www.tutorialspoint.com/im
      ages/mongodb.png') 20 round";
      document.getElementById("Sample").innerHTML="The border image is now changed";
   }
</script>
</head>
<body>
<h2>Learning is fun</h2>
<p id="PARA1">This is a sample paragraph. Here is another line</p>
<p>Change the above paragraph border image by clicking the below button</p>
<button onclick="changeBorderImage()">Change Border Image</button>
<p id="Sample"></p>
</body>
</html>