清晰易懂的了解CSS中的边框颜色渐变

清晰易懂的了解CSS中的边框颜色渐变

使用边框颜色渐变之前，先简单了解一下两种渐变方式：

线性渐变	linear-gradient(方向, 颜色1, 颜色2, … ,颜色n);
径向渐变	radial-gradient(颜色1 覆盖区域大小,颜色2 覆盖区域大小, … );

注：线性渐变的方向可以为：

​ 1、一个方向值时： to bottom 表示从上边到下边

​ 2、两个方向值时： to right bottom 表示从左上角到右下角

​ 径向渐变的覆盖区域大小为百分比，表示该颜色覆盖的范围

​ 例如： radial-gradient(green 30%,yellow 80%);

​ 表示绿色占了整个区域的30%，黄色占了整个区域的20%，绿色与黄色过渡的部分占了整个区域的50%；

一、边框颜色线性渐变

简写：

border-image: linear-gradient(方向，颜色1，颜色2 …) 内向偏移量;

例如：

表示盒子有一个从左上角到右下角进行由黄色到绿色的10px宽的渐变边框

	//边框的颜色为什么不重要，会被下面覆盖的
	border: 10px solid black;
	//最后面跟的 10 表示内向偏移量，写成和边框设置的宽度一样即可
    border-image: linear-gradient(to bottom right,yellow, green) 10;

效果：

二、边框颜色径向渐变

简写：

border-image: radial-gradient(颜色1 百分比，颜色2 百分比…) 内向偏移量

例如：

    //边框的颜色为什么不重要，会被下面覆盖的
	border: 10px solid black;
	//最后面跟的 10 表示内向偏移量，写成和边框设置的宽度一样即可  
	border-image: radial-gradient(yellow 70%, green 130%) 10;

​ 效果：

​

三、详解：

解释属性之前，先解释一下边框渐变的原理;

border:10px solid #000;

border-image-slice:10 10 10 10;

border-image-width:10px 10px 10px 10px;

border-image-outset:10px 10px 10px 10px;

① 现在有一个长宽都为100px的盒子，给它设置10px的边框

② border-image-slice:10 10 10 10; 该属性规定图像的上、右、下、左侧边缘的向内偏移，图像被分割为九个区域：四个角、四条边以及一个中间区域。 除非设置fill，否则中间区域会被丢弃

如图：

1、3、7、9随着border-image-width进行变化，

③border-image-width:10px 10px 10px 10px; 表示给图像定义四个角，如果不设置border-image-slice，则只会显示四个角

如图：

④border-image-outset 的作用是让边框背景延伸到盒子外 ，但是盒子大小不会发生改变，只会有视觉上的变化，作用为在视觉上使盒子分开。

border-image全属性有五个，这个解释是文档给出的

属性	属性值
border-image-source	默认值为none，可以插入图片，但渐变和图片冲突，不做分析
border-image-slice	图片边框向内偏移的量
border-image-width	图片边框的宽度
border-image-outset	边框图像区域超出边框的量
border-image-repeat	图像边框是否应平铺，这个我们这里也用不上

四、完整代码展示：

 		div{
            margin: 50px auto;
            width: 400px;
            height: 400px;
            border: 10px solid black;
     		/*这一行是线性渐变的代码*/
            border-image-source: linear-gradient(to bottom right,yellow, green) 10;
     		/*这一行是径向渐变的代码*/
            /* border-image: radial-gradient(yellow 70%, green 130%); */
            border-image-outset: 10px;
            border-image-width: 20px;
            border-image-slice: 10;
        }

​