HTML | DOM 样式 borderImageSource 属性

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

句法：

• 获取 borderImageSource 属性

  object.style.borderImageSource

• 设置 borderImageSource 属性

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

属性值

1. none：这将属性设置为不使用图像。

   示例 1：

     
   
       DOM Style borderImageSource Property
       
           .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');
           }
       
   
     
   
       GeeksforGeeks
       DOM Style borderImageSource Property
       
       Click on the button to change 
         the source of border-image
       
       GeeksforGeeks
       
       
         Change source of border-image
       
     
       
           function changeSource() {
               elem = document.querySelector('.item');
     
               // Setting the border image source to none
               elem.style.borderImageSource = "none";
           }
       
   
     

   输出：

   • 点击按钮前：
     
   • 按下按钮后：
     
2. 图像：这将图像设置为指定的路径。

   示例 2：

     
   
       DOM Style borderImageSource Property
       
           .item {
               height: 50px;
               border: 25px solid transparent;
           }
       
   
     
   
       GeeksforGeeks
       DOM Style borderImageSource Property
       
       Click on the button to change the source of border-image
       
       GeeksforGeeks
       
         Change source of border-image
       
     
       
           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')";
           }
       
   
     

   输出：

   • 点击按钮前：
     
   • 点击按钮后：
     
3. initial ：这用于将此属性设置为其默认值。

   示例 3：

     
   
       DOM Style borderImageSource Property
       
           .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');
           }
       
   
     
   
       GeeksforGeeks
       DOM Style borderImageSource Property
       Click on the button to change the source of border-image
       GeeksforGeeks
       
          Change source of border-image
       
     
       
           function changeSource() {
               elem = document.querySelector('.item');
     
               // Setting the border image source to initial
               elem.style.borderImageSource = "initial";
           }
       
   
     

   输出：

   • 点击按钮前：
     
   • 按下按钮后：
     
4. inherit ：这用于从其父级继承属性。

   示例 4：

     
   
       DOM Style borderImageSource Property
       
           .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');
           }
       
   
     
   
       GeeksforGeeks
       DOM Style borderImageSource Property
       Click on the button to change 
          the source of border-image
       
           GeeksforGeeks
       
       
       
         Change source of border-image
       
     
       
           function changeSource() {
               elem = document.querySelector('.item');
     
               // Setting the border image source
               // to inherit from its parent
               elem.style.borderImageSource = "inherit";
           }
       
   
     

   输出：

   点击按钮前：
   

   • 按下按钮后：
     

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

• 铬合金
• 浏览器 11.0
• 火狐
• Safari 6.0