資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
安卓
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟
心理學
社會科學
時尚研究
法律研究HTML DOM BorderImage 屬性
borderImage 屬性用於設定或獲取元素的邊框圖片。這是一個速記屬性，因此我們可以一次操作 borderImageSource、borderImageSlice、borderImageWidth、borderImageOutset 和 borderImageRepeat 屬性。
語法
以下是語法：
設定 borderImage 屬性：
object.style.borderImage = "source slice width outset repeat|initial|inherit"
屬性值
屬性值如下：
| 序號 | 值和描述 |
|---|---|
| 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("https://tutorialspoint.tw/images/blockchain.png") 20 stretch;
width: 100px;
}
</style>
<script>
function changeBorderImage(){
document.getElementById("PARA1").style.borderImage="url('https://tutorialspoint.tw/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>輸出
這將產生以下輸出：
單擊“摺疊邊框”按鈕：
更新日期：2019 年 8 月 21 日
52 次瀏覽
廣告