CSS边框图像属性border-image用法示例

2021年4月1日18:12:23 发表评论 1,102 次浏览

边框图像属性在CSS中, 用于设置元素的边框。

语法如下：

border-image: source slice width outset repeat|initial|inherit;

border-image属性是下面列出的许多属性的组合：

border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat

属性值：

border-image-source：此属性用于设置边框图像的源位置。

语法如下：

border-image-source: url(image source location);

border-image-slice：border-image-slice属性用于划分或分割border-image-source属性指定的图像。

border-slice属性将给定图像划分为：

9个地区
4个角
4条边
中部地区

语法如下：

border-image-slice: value;

border-image-width：

border-image-width属性用于设置边框的宽度。

语法如下：

border-image-width: value;

border-image-outset：

border-image-outset属性设置元素边框图像从其边框框中显示的距离。

语法如下：

border-image-outset: value;

border-image-repeat：

border-image-repeat属性定义了如何调整源图像的边缘区域以适合元素边框图像的尺寸。

语法如下：

border-image-repeat: value;

初始：

它用于将border-image属性设置为其默认值。

继承：

它用于从其父级设置border-image属性。

范例1：

<!DOCTYPE html>
< html >
     < head >
         < title >
             CSS border-image Property
         </ title >
          
         < style >
             #borderimg1 {
                 border: 10px solid transparent;
                 padding: 15px;
                 -webkit-border-image: url(
'https://media.lsbin.org/wp-content/uploads/border2-2.png')
                 30 round;
                 border-image: url(
'https://media.lsbin.org/wp-content/uploads/border2-2.png')
                 30 round;
                 text-align:center;
             }
  
             #borderimg2 {
                 border: 10px solid transparent;
                 padding: 15px;
                 -webkit-border-image: url(
'https://media.lsbin.org/wp-content/uploads/border2-2.png')
                 30 stretch;
                 border-image: url(
'https://media.lsbin.org/wp-content/uploads/border2-2.png')
                 30 stretch;
                 text-align:center;
             }
         </ style >
     </ head >
      
     < body >
         < h2 >border-image property</ h2 >
          
         < p id = "borderimg1" >
             Element Content
         </ p >
         < p id = "borderimg2" >
             Element Content
         </ p >
     </ body >
</ html >

输出如下：

范例2：

<!DOCTYPE html>
< html >
     < head >
         < title >
             CSS border-image Property
         </ title >
          
         < style >
             #borderimg1 {
                 border: 15px solid transparent;
                 padding: 15px;
                 border-image:url(
'https://media.lsbin.org/wp-content/uploads/border2-2.png')
                 50 round;
             }
  
             #borderimg2 {
                 border: 15px solid transparent;
                 padding: 15px;
                 border-image:url(
'https://media.lsbin.org/wp-content/uploads/border2-2.png') 
                 40% stretch;
             }
             #borderimg3 {
                 border: 15px solid transparent;
                 padding: 15px;
                 border-image:url(
'https://media.lsbin.org/wp-content/uploads/border2-2.png')
                 70 round;
             }
         </ style >
     </ head >
      
     < body >
         < h2 >border-image property</ h2 >
         < p id = "borderimg1" >BORDER 1</ p >
         < p id = "borderimg2" >BORDER 2</ p >
         < p id = "borderimg3" >BORDER 3</ p >
     </ body >
</ html >

输出如下：