当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。