當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

HTML Style borderImageOutset用法及代碼示例


在包含邊框的Style borderImageOutset空間中，要繪製的圖像稱為border-image空間。默認情況下，邊框圖像區域的邊界與元素的border-box的邊界匹配。但是，可以使用border-image-outset屬性擴展這些邊界。

border-image-outset屬性指定border-image空間從元素的border-box區域延伸得遠的量。此數量被描述為一組初始值，這些初始值指定border-image空間將從頂部，右側，底部和左側邊擴展的數量。

用法:


  • 它返回borderImageOutset屬性
    object.style.borderImageOutset
  • 它用於設置borderImageOutset屬性
    object.style.borderImageOutset="length|number|initial|inherit"

返回值：它返回邊框圖像區域超出邊框超出範圍的數量。
屬性值

    長度：它指定距離元素邊將出現的距離。它以像素為單位。預設值為0。
    • 用法: 
      borderImageOutset = "10px"

      例：

      <!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        #GFG { 
            width:200px; 
            height:150px; 
            margin-left:180px; 
            font-size:20px; 
            background-color:lightgrey; 
            border:20px solid transparent; 
            border-image:  
url('https://media.geeksforgeeks.org/wp-content/uploads/bir1.png')  
              50 50 stretch; 
            border-image-outset:5px; 
        } 
    </style> 
</head> 
  
<body align="center"> 
    <button onclick="myGeeks()">Click it</button> 
    <p>On click, border-image-outset property changes.</p> 
    <div id="GFG"> 
        <p align="center"> 
            GeeksforGeeks 
        </p> 
    </div> 
    <script> 
        function myGeeks() { 
            document.getElementById("GFG") 
                .style.borderImageOutset = "10px"; 
        } 
    </script> 
</body> 
  
</html>                

      輸出：

      • 在點擊按鈕之前：
      • 單擊按鈕後：
  • 用法: 
    borderImageOutset = "5px 10px"

    例：

    <!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        #GFG { 
            width:200px; 
            height:150px; 
            margin-left:180px; 
            font-size:20px; 
            background-color:lightgrey; 
            border:20px solid transparent; 
            border-image:  
              url('https://media.geeksforgeeks.org/wp-content/uploads/bir1.png')  
              50 50 stretch; 
            border-image-outset:5px; 
        } 
    </style> 
</head> 
  
<body align="center"> 
    <button onclick="myGeeks()">Click it</button> 
    <p>On click, border-image-outset property changes.</p> 
    <div id="GFG"> 
        <p align="center"> 
            GeeksforGeeks 
        </p> 
    </div> 
    <script> 
        function myGeeks() { 
            document.getElementById("GFG") 
                .style.borderImageOutset = "5px 10px"; 
        } 
    </script> 
</body> 
  
</html>            

    輸出：

    • 在點擊按鈕之前：
    • 單擊按鈕後：
  • 用法: 
    borderImageOutset = "5px 7px 10px"

    例：


    <!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        #GFG { 
            width:200px; 
            height:150px; 
            margin-left:180px; 
            font-size:20px; 
            background-color:lightgrey; 
            border:20px solid transparent; 
            border-image:
              url('https://media.geeksforgeeks.org/wp-content/uploads/bir1.png')  
              50 50 stretch; 
            border-image-outset:5px; 
        } 
    </style> 
</head> 
  
<body align="center"> 
    <button onclick="myGeeks()">Click it</button> 
    <p>On click, border-image-outset property changes.</p> 
    <div id="GFG"> 
        <p align="center"> 
            GeeksforGeeks 
        </p> 
    </div> 
    <script> 
        function myGeeks() { 
            document.getElementById("GFG") 
            .style.borderImageOutset = "5px 7px 10px"; 
        } 
    </script> 
</body> 
  
</html>            

    輸出：

    • 在點擊按鈕之前：
    • 單擊按鈕後：
  • 用法: 
    borderImageOutset = "5px 7px 10px 12px"

    例：

    <!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        #GFG { 
            width:200px; 
            height:150px; 
            margin-left:180px; 
            font-size:20px; 
            background-color:lightgrey; 
            border:20px solid transparent; 
            border-image:  
              url('https://media.geeksforgeeks.org/wp-content/uploads/bir1.png')  
              50 50 stretch; 
            border-image-outset:5px; 
        } 
    </style> 
</head> 
  
<body align="center"> 
    <button onclick="myGeeks()">Click it</button> 
    <p>On click, border-image-outset property changes.</p> 
    <div id="GFG"> 
        <p align="center"> 
            GeeksforGeeks 
        </p> 
    </div> 
    <script> 
        function myGeeks() { 
            document.getElementById("GFG") 
            .style.borderImageOutset = "5px 7px 10px 12px"; 
        } 
    </script> 
</body> 
  
</html>                    

    輸出：

    • 在點擊按鈕之前：
    • 單擊按鈕後：
  • 數：取十進製值。如果borderWidth為k，borderImageOutset為2，則表示borderImage與元素邊界的距離為2 * k。
    用法: 
    borderImageOutset = "1.2"

    例：

    <!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        #GFG { 
            width:200px; 
            height:150px; 
            margin-left:180px; 
            font-size:20px; 
            background-color:lightgrey; 
            border:20px solid transparent; 
            border-image:  
              url('https://media.geeksforgeeks.org/wp-content/uploads/bir1.png')  
              50 50 stretch; 
            border-image-outset:5px; 
        } 
    </style> 
</head> 
  
<body align="center"> 
    <button onclick="myGeeks()">Click it</button> 
    <p>On click, border-image-outset property changes.</p> 
    <br> 
    <br> 
    <div id="GFG"> 
        <p align="center"> 
            GeeksforGeeks 
        </p> 
    </div> 
    <script> 
        function myGeeks() { 
            document.getElementById("GFG") 
                .style.borderImageOutset = "1.2"; 
        } 
    </script> 
</body> 
  
</html>                

    輸出：

    • 在點擊按鈕之前：
    • 單擊按鈕後：
  • 繼承：如果未為此字段指定任何值，則它將從element的父級繼承。如果沒有父元素，則表示此元素是root，則它采用初始(或默認)值。
  • 初始：initial關鍵字將屬性的初始值描述為指定值。也就是說，無論該屬性是繼承的還是級聯的值，它都將重置為其默認初始值。

瀏覽器支持：下麵列出了DOM樣式borderImageOutset屬性支持的瀏覽器：

  • 穀歌瀏覽器15.0
  • Internet Explorer 11.0
  • Mozila Firefox 15.0
  • Opera 15.0
  • Safari 6.0


相關用法


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