CSS3的border-image-slice属性详细介绍

素颜马尾好姑娘i 2023-07-16 08:56 29阅读 0赞

### border-image-slice ###

*   *  说明：
     *  基础知识：
     *  参数可能值介绍：
     *  参数：
     *  具体使用：
     *  小总结：

首先我们来了解一下它是干嘛的。

## 说明： ##

文档说明：它是控制图像边界向内偏移的。

what？？？这是嘛意思啊？根本看不懂！！！好的，我们先不要急，我们在看看：

## 基础知识： ##

当我们通过 border-image-source 引用边框图片后，**border-image-slice**属性会将图片分割为9个区域：四个角，四个边（edges）以及中心区域。四条切片线，从它们各自的侧面设置给定距离，控制区域的大小。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70]  
这感觉好像理解点了，用完border-image-slice属性之后就把这个图分成了九个部分。  
我们在接着往下看：

> 上图说明了每个区域的位置。  
> 区域 1-4 为角区域（corner region）。 每一个都用一次来形成最终边界图像的角点。（Each one is used a single time to form the corners of the final border image.）  
> 区域 5-8 边区域（edge region）。在最终的边框图像中重复，缩放或修改它们以匹配元素的尺寸。（These are repeated, scaled, or otherwise modified in the final border image to match the dimensions of the element.）  
> 区域 9 为中心区域（ middle region）。它在默认情况下会被丢弃，但如果设置了关键字fill，则会将其用作背景图像。（It is discarded by default, but is used like a background image if the keyword fill is set.）  
> 中间的区域将不会被边框使用，但当设置有 fill 关键词时将会被作为 background-image。这个关键词可以被设置在属性的任何一个位置(前面、后面或者两个值之间)

看完上面基础知识了我们再来了解一下他的参数：

## 参数可能值介绍： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 1]

## 参数： ##

/* 只有一个值的时候它控制所有的边 */
    border-image-slice: 30%; 
    
    /* 有俩个值的的时候它分别控制垂直方向 | 水平方向 */
    border-image-slice: 10% 30%;
    
    /* 有三个值的时候它分别控制 顶部 | 水平方向 | 底部 */
    border-image-slice: 30 30% 45;
    
    /* 四个值那就是对应 上 右 下 左 */
    border-image-slice: 7 12 14 5; 
    
    /* 使用fill（fill可以放在任意位置）那就开启了第九个九宫格 */
    border-image-slice: 10% fill 7 12;
    
    /* Global values */
    border-image-slice: inherit;
    border-image-slice: initial;
    border-image-slice: unset;

## 具体使用： ##

我们先从最开始的百分之百开始看效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 2]  
然后百分之七十：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 3]  
百分之三十五：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 4]

## 小总结： ##

我们现在可以清楚的了解了，border-image-slice就是控制四个角的background-image-source的展示的。

但是现在朋友们肯定很好奇百分之三十五的情况下的那四个边的问题。  
![在这里插入图片描述][20200318120111691.png]  
这四个边笔者单独说明一下，如果当border-image-slice小于百分之50的话就会拉伸伸满。然后我们在通过border-image-repeat属性控制他的填补状态的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 5]

当然还是有一些比较懵的不理解的地方，欢迎大家在下面评论区讨论研究~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70]: /images/20230528/3e6db87da207400d82505c9a5f957c77.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 1]: /images/20230528/33e696635e324d00b4437c1fab5c5a1f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 2]: /images/20230528/39bd4bf82ba7458392100fe79d24b49a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 3]: /images/20230528/8826f3a7999e45ac9ef0ea5d0963f18c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 4]: /images/20230528/7c3d592014934e9aa4845d5134d5a80a.png
[20200318120111691.png]: /images/20230528/b4a48f3a20a042119369e216ba045f87.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 5]: /images/20230528/4c34977496024addbe55d91a24b7c222.png