📜  CSS | border-image-slice 属性

📅  最后修改于: 2021-08-30 10:33:55             🧑  作者: Mango

在 CSS 中, border-image-slice属性用于分割或切片由border-image-source属性指定的图像。

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

  • 9个地区
  • 4个角
  • 4 条边
  • 一个中间区域。

注意:中间区域默认保持透明,填充值用于使其不透明/半透明。

下图说明了上述区域:

  • 区域 1、3、7、9 是角区域。
  • 区域 2、4、6、8 是边缘区域。
  • 区域5是中间区域。

句法:

border-image-slice= value;

属性值:

Value Effect/Functionality
Number Represents an edge offset in pixels for raster images and coordinates for vector images.(See:vector vs raster graphics)
Percentage Represents an edge offset as a percentage of the source image’s size: the width of the image for horizontal offsets, the height for vertical offsets.
Fill Causes the middle region to be displayed as a background image.
Initial Initialises the property to its default value.
Inherit Inherits the value of the property from it’s parent element.

下面的程序说明了 border-image-slice 属性:
例子:

 
 
     
        
            CSS | border-image-slice Property
        
         
     
     
        

GeeksforGeeks

          

border-image-slice property

          
Border 1
          
Border 2
          
Border 3
        
Border 4
        
Border 5
         

输出:

支持的浏览器border-image 属性支持的浏览器如下:

  • 谷歌浏览器 16.0
  • 浏览器 11.0
  • 火狐 15.0
  • 歌剧 15.0
  • Safari 6.0