【CSS】--渐变【背景、边框、文字】

一、基础知识

1、linear-gradient() ，函数用于创建一个表示两种或多种颜色线性渐变的图片。定义线性渐变

语法

background-image: linear-gradient([direction], color-stop1, color-stop2, ...);  

// direction 可选，用角度值指定渐变的方向（或角度）。  

// color-stop1, color-stop2,... 用于指定渐变的起止颜色。
direction方向：
to bottom（默认）、to right、to left 、to top
to bottom right、to left top...、**deg

2、background-clip 规定背景的绘制区域

语法

background-clip: border-box|padding-box|content-box;

//border-box  背景被裁剪到边框盒

//padding-box  背景被裁剪到内边距框。

//content-box  背景被裁剪到内容框。

3、background-origin 设置背景图像的起始位置。

语法

background-position: value;

//top left

//top center

//bottom center

x% y%

xpos ypos

二、css实现border和text同样渐变的效果

1、实现效果：border和内部渐变不同

2、实现效果：border和内部渐变不同，同时文字加上渐变

2、代码

总结

• linear-gradient()，绘制渐变图片
• background-clip，规定背景的绘制区域。
• background-origin，设置背景的位置
• 绘制渐变图片，分别应用于边框、内部、文字，实现上述效果。

三、补：单独边框渐变

border-image：

source：资源

slice：分割通过 border-image-source 属性加载的图像，==>分割后去除内部图像应用成为border

width：加载资源的厚度（宽度）

outset：定义图像边框相对于边框边界向外偏移的距离

repeat：设置如何填充使用 border-image-slice 属性分割的图像边框

语法

border-image: source slice width outset repeat|initial|inherit;

border-image-source：none |

border-image-slice：[ | ]{1,4} && fill?

border-image-width：[ | | | auto ]{1,4}

border-image-outset：[ | ]{1,4}

border-image-repeat：[ stretch | repeat | round | space ]{1,2}

border-image是简写

  width: 100px;
  height: 100px;
  margin: 100px auto;
  border-radius: 10px;
  border: 5px solid transparent;
  border-image: linear-gradient(to right, red, #578aef) 20;

  width: 100px;
  height: 100px;
  margin: 100px auto;
  border-radius: 10px;
  border: 30px solid #d35b5b00;
  border-image: linear-gradient(to right, red, yellow, #578aef);
  border-image-slice: 10 fill 20 50;
  border-image-slice: 48;
  border-image-width: 20px;
  border-image-repeat: revert;