CSS border-image-source用法及代码示例

border-image-source属性用于指定要设置为元素边框的图像源。

用法:

border-image-source:url(image-path.png)| none| initial| inherit;

注意：如果值为none，则将使用边框样式。可以借助border-image-slice属性将指定的图像划分为多个区域。

值：

none:未指定图像。
image:用于指定用作元素边框的图像的路径。
initial:使用默认值初始化属性。
inherit:它从父元素获取值。

例：

<!DOCTYPE html>   
<html>   
    <head>   
        <title> 
            CSS | border-image-source Property 
        </title> 
        <style>   
            body {   
                text-align:center;  
                color:green;  
            }   
                
            .border1 {   
                border:10px solid transparent;   
                padding:15px;   
                border-image-source:url(   
https://media.geeksforgeeks.org/wp-content/uploads/border1-2.png);   
                border-image-repeat:round;   
                border-image-slice:50;   
                border-image-width:20px;   
            }    
             
        </style>   
    </head>   
    <body>   
        <h1>GeeksforGeeks</h1>   
        <h2>border-image-source property</h2>   
        <div class = "border1">GEEKSFORGEEKS</div>   
    </body>  
</html>

输出：

支持的浏览器：CSS | Java支持的浏览器。下面列出了border-image-source属性：

chrome 15.0
Edge-11.0
Firefox 15.0
Opera 15.0
Safari 6.0

相关用法

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