清晰易懂的了解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;

效果:
清晰易懂的了解CSS中的边框颜色渐变_第1张图片

二、边框颜色径向渐变

简写:

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

例如:

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

​ 效果:
清晰易懂的了解CSS中的边框颜色渐变_第2张图片

三、详解:

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

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,否则中间区域会被丢弃

如图:
清晰易懂的了解CSS中的边框颜色渐变_第3张图片

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

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

如图:

清晰易懂的了解CSS中的边框颜色渐变_第4张图片

④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;
        }

你可能感兴趣的:(css,html5)