CSS border-image-source用法及代碼示例

border-image-source屬性用於指定要設置為元素邊框的圖像源。

用法:

border-image-source:url(image-path.png)| none| initial| inherit;

注意：如果值為none，則將使用邊框樣式。可以借助border-image-slice屬性將指定的圖像劃分為多個區域。

值：

none:未指定圖像。
image:用於指定用作元素邊框的圖像的路徑。
initial:使用默認值初始化屬性。
inherit:它從父元素獲取值。

例：

<!DOCTYPE html>   
<html>   
    <head>   
        <title> 
            CSS | border-image-source Property 
        </title> 
        <style>   
            body {   
                text-align:center;  
                color:green;  
            }   
                
            .border1 {   
                border:10px solid transparent;   
                padding:15px;   
                border-image-source:url(   
https://media.geeksforgeeks.org/wp-content/uploads/border1-2.png);   
                border-image-repeat:round;   
                border-image-slice:50;   
                border-image-width:20px;   
            }    
             
        </style>   
    </head>   
    <body>   
        <h1>GeeksforGeeks</h1>   
        <h2>border-image-source property</h2>   
        <div class = "border1">GEEKSFORGEEKS</div>   
    </body>  
</html>

輸出：

支持的瀏覽器：CSS | Java支持的瀏覽器。下麵列出了border-image-source屬性：

chrome 15.0
Edge-11.0
Firefox 15.0
Opera 15.0
Safari 6.0

相關用法

注：本文由純淨天空篩選整理自DannanaManoj大神的英文原創作品 CSS | border-image-source Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。