HTML Style borderImageSource用法及代码示例

DOM样式borderImageSource属性用于设置或返回要使用的图像，而不是border-style属性提供的样式。

用法:

获取borderImageSource属性
```
object.style.borderImageSource
```

设置borderImageSource属性

object.style.borderImageSource = "none | image | initial |
inherit"

属性值

none:这会将属性设置为不使用图像。

示例1：

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>DOM Style borderImageSource Property</title> 
    <style> 
        .item { 
            height:50px; 
            border:25px solid transparent; 
            
            /* Setting the border before demonstrate 
               the effect of 'none' */ 
            border-image:  
url('https://media.geeksforgeeks.org/wp-content/uploads/border-img.png'); 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <b>DOM Style borderImageSource Property</b> 
    
    <p>Click on the button to change  
      the source of border-image</p> 
    
    <div class="item">GeeksforGeeks</div> 
    
    <button onclick="changeSource()"> 
      Change source of border-image 
    </button> 
  
    <script> 
        function changeSource() { 
            elem = document.querySelector('.item'); 
  
            // Setting the border image source to none 
            elem.style.borderImageSource = "none"; 
        } 
    </script> 
</body> 
  
</html>

输出：

在单击按钮之前：
按下按钮后：

image:这会将图像设置为指定的路径。

示例2：

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>DOM Style borderImageSource Property</title> 
    <style> 
        .item { 
            height:50px; 
            border:25px solid transparent; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <b>DOM Style borderImageSource Property</b> 
    
    <p>Click on the button to change the source of border-image</p> 
    
    <div class="item">GeeksforGeeks</div> 
    <button onclick="changeSource()"> 
      Change source of border-image 
    </button> 
  
    <script> 
        function changeSource() { 
            elem = document.querySelector('.item'); 
  
            // Setting the border image source to another image 
            elem.style.borderImageSource = 
"url('https://media.geeksforgeeks.org/wp-content/uploads/border-img.png')"; 
        } 
    </script> 
</body> 
  
</html>

输出：

在单击按钮之前：
单击按钮后：

initial：用于将此属性设置为其默认值。

示例3：

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>DOM Style borderImageSource Property</title> 
    <style> 
        .item { 
            height:50px; 
            border:25px solid transparent; 
            /* Setting the border before to  
               demonstrate the effect of 'initial' */ 
            border-image:  
url('https://media.geeksforgeeks.org/wp-content/uploads/border-img.png'); 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <b>DOM Style borderImageSource Property</b> 
    <p>Click on the button to change the source of border-image</p> 
    <div class="item">GeeksforGeeks</div> 
    <button onclick="changeSource()"> 
       Change source of border-image 
    </button> 
  
    <script> 
        function changeSource() { 
            elem = document.querySelector('.item'); 
  
            // Setting the border image source to initial 
            elem.style.borderImageSource = "initial"; 
        } 
    </script> 
</body> 
  
</html>

输出：

在单击按钮之前：
按下按钮后：

inherit：用于继承其父项的属性。

示例4：

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>DOM Style borderImageSource Property</title> 
    <style> 
        .item { 
            height:50px; 
            border:25px solid transparent; 
        } 
          
        #parent { 
            /* Setting the border of parent  
               demonstrate the effect of 'inherit' */ 
            border-image:  
url('https://media.geeksforgeeks.org/wp-content/uploads/border-img.png'); 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <b>DOM Style borderImageSource Property</b> 
    <p>Click on the button to change  
       the source of border-image</p> 
    <div id="parent"> 
        <div class="item">GeeksforGeeks</div> 
    </div> 
    
    <button onclick="changeSource()"> 
      Change source of border-image 
    </button> 
  
    <script> 
        function changeSource() { 
            elem = document.querySelector('.item'); 
  
            // Setting the border image source 
            // to inherit from its parent 
            elem.style.borderImageSource = "inherit"; 
        } 
    </script> 
</body> 
  
</html>

输出：

在单击按钮之前：
inherit-before

按下按钮后：

支持的浏览器：borderImageSource属性支持的浏览器如下：

Chrome
Internet Explorer 11.0
Firefox
Safari 6.0

相关用法

注：本文由纯净天空筛选整理自sayantanm19大神的英文原创作品 HTML | DOM Style borderImageSource Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。