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


HTML Style borderImageSlice用法及代码示例

borderImageSlice属性用于指定图像边框的向内偏移。用户可以根据百分比,数字或全局值来指定此属性的值。

用法:

object.style.borderImageSlice = "number|%|fill|initial|inherit"

属性值:


  • number
  • fill
  • initial
  • inherit
  1. 数:borderImageSlice属性可以将数字作为值,其中该数字表示图像或矢量坐标中的像素(如果图像是矢量图像)。

    示例1:

    <!DOCTYPE html> 
    <html> 
      
    <head> 
        <style> 
            div { 
                background-color:green; 
                border:30px solid transparent; 
                border-image:url( 
    'https://media.geeksforgeeks.org/wp-content/uploads/border-3.png'); 
                border-image-slice:40; 
                border-image-width:1 1 1 1; 
                border-image-outset:0; 
                border-image-repeat:round; 
            } 
        </style> 
    </head> 
      
    <body> 
        <center> 
            <div id="main"> 
                <p> 
                    GeeksforGeeks:
                  A computer science portal for geeks. 
                </p> 
            </div> 
            <p style="color:green;">Click below</p> 
            
            <button onclick="myFunction()">Change</button> 
        </center> 
      
        <script> 
            function myFunction() { 
                
                document.getElementById( 
                  "main").style.borderImageSlice = "30"; 
            } 
        </script> 
    </body> 
      
    </html>

    输出:

    • 点击之前:
    • 点击后:
  2. 百分比(%):相对于默认大小为100%的图像尺寸的百分比。
    示例2:
    <!DOCTYPE html> 
    <html> 
      
    <head> 
        <style> 
            div { 
                background-color:green; 
                border:30px solid transparent; 
                border-image:url( 
    'https://media.geeksforgeeks.org/wp-content/uploads/border-3.png'); 
                border-image-slice:40; 
                border-image-width:1 1 1 1; 
                border-image-outset:0; 
                border-image-repeat:round; 
            } 
        </style> 
    </head> 
      
    <body> 
        <center> 
            <div id="main"> 
                <p> 
                    GeeksforGeeks:  
                  A computer science portal for geeks. 
                </p> 
            </div> 
            <p style="color:green;">Click below</p> 
            <button onclick="myFunction()">Change</button> 
        </center> 
      
        <script> 
            function myFunction() { 
                
                document.getElementById( 
                  "main").style.borderImageSlice = "30% 30%"; 
            } 
        </script> 
    </body> 
      
    </html>

    输出:

    • 点击之前:
    • 点击后:
  3. 填:它导致边界的中间部分被保留。
    示例3:
    <!DOCTYPE html> 
    <html> 
      
    <head> 
        <style> 
            div { 
                background-color:green; 
                border:30px solid transparent; 
                border-image:url( 
    'https://media.geeksforgeeks.org/wp-content/uploads/border-3.png'); 
                border-image-slice:40; 
                border-image-width:1 1 1 1; 
                border-image-outset:0; 
                border-image-repeat:round; 
            } 
        </style> 
    </head> 
      
    <body> 
        <center> 
            <div id="main"> 
                <p> 
                    GeeksforGeeks:
                  A computer science portal for geeks. 
                </p> 
            </div> 
            <p style="color:green;">Click below</p> 
            <button onclick="myFunction()">Change</button> 
        </center> 
      
        <script> 
            function myFunction() { 
                
                document.getElementById( 
                  "main").style.borderImageSlice = "fill"; 
            } 
        </script> 
    </body> 
      
    </html>

    输出:

    • 点击之前:
    • 点击后:
  4. 初始:将属性设置为其默认值。此处的默认值为100%。
    示例4:
    <!DOCTYPE html> 
    <html> 
      
    <head> 
        <style> 
            div { 
                background-color:green; 
                border:30px solid transparent; 
                border-image:url( 
    'https://media.geeksforgeeks.org/wp-content/uploads/border-3.png'); 
                border-image-slice:40; 
                border-image-width:1 1 1 1; 
                border-image-outset:0; 
                border-image-repeat:round; 
            } 
        </style> 
    </head> 
      
    <body> 
        <center> 
            <div id="main"> 
                <p> 
                    GeeksforGeeks:  
                  A computer science portal for geeks. 
                </p> 
            </div> 
            <p style="color:green;">Click below</p> 
            <button onclick="myFunction()">Change</button> 
        </center> 
      
        <script> 
            function myFunction() { 
                
                document.getElementById( 
                  "main").style.borderImageSlice = "initial"; 
            } 
        </script> 
    </body> 
      
    </html> 

    输出:

    • 点击之前:
    • 点击后:
  5. 继承:从其父元素继承此属性。
    示例5:
    <!DOCTYPE html> 
    <html> 
      
    <head> 
        <style> 
            div { 
                background-color:green; 
                border:30px solid transparent; 
                border-image:url( 
    'https://media.geeksforgeeks.org/wp-content/uploads/border-3.png'); 
                border-image-slice:40; 
                border-image-width:1 1 1 1; 
                border-image-outset:0; 
                border-image-repeat:round; 
            } 
        </style> 
    </head> 
      
    <body> 
        <center> 
            <div id="main"> 
                <p> 
                    GeeksforGeeks:  
                  A computer science portal for geeks. 
                </p> 
            </div> 
            <p style="color:green;">Click below</p> 
            <button onclick="myFunction()">Change</button> 
        </center> 
      
        <script> 
            function myFunction() { 
                
                document.getElementById( 
              "main").style.borderImageSlice = "inherit"; 
            } 
        </script> 
    </body> 
      
    </html>

    输出:

    • 点击之前:
    • 点击后:

支持的浏览器:下面列出的DOM样式borderImageSlice属性支持的浏览器:

  • Google Chorme
  • Edge
  • 火狐浏览器
  • Opera
  • Safari


相关用法

注:本文由纯净天空筛选整理自piyushpilaniya98大神的英文原创作品 HTML | DOM Style borderImageSlice Property。非经特殊声明,原始代码版权归原作者所有,本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。