如何在 CSS 中切片由 border-image-source 指定的图像？

在本文中，我们将看到如何使用 CSS 将边框图像添加为切片图像。要制作边框切片图像，使用 border-image-slice 属性。此属性对由 border-image-source 属性指定的图像进行分割或切片。

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

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

下图说明了上述区域：

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

句法：

border-image-slice= Number | Percent 
   | fill | Initial | Inherit;

例子：

HTML

  

    
      
    

  

    
GeeksforGeeks
    

        How to slice the image specified
        by border-image-source in CSS?
    
  
    
Border 1
    
Border 2
    
Border 3

  

输出：