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

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

边框图像属性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 >

输出如下:

CSS |边框图像属性1

范例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 >

输出如下:

CSS |边框图像属性2

支持的浏览器:支持的浏览器边框图像属性下面列出:

  • Google Chrome 16.0、4.0 -webkit-
  • Internet Explorer 11.0
  • Firefox 15.0、3.5 -moz-
  • Opera 15.0、11.0 -o-
  • Safari 6.0、3.1 -webkit-

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: