【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、代码

<template>
  <div>
    <div class="demo1">border和内部渐变不同</div>
    <div class="demo2">
      <div class="demo2_child">border和内容渐变不同,和文字渐变相同</div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.demo1 {
  font-size: 16px;
  font-weight: 800;
  width: 160px;
  height: 160px;
  padding: 10px;
  border: 10px solid transparent;
  border-radius: 8px;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(45deg, red, rgba(205, 158, 245, 1)),
    linear-gradient(135deg, rgba(139, 243, 235, 1), rgba(205, 158, 245, 1));
}
.demo2 {
  width: 200px;
  height: 60px;
  padding: 10px;
  border: 10px solid transparent;
  border-radius: 8px;
  background-clip: padding-box, border-box;

  background-origin: padding-box, border-box;
  background-image: linear-gradient(45deg, #1d1f2d, #1d1f2d),
    linear-gradient(135deg, rgba(139, 243, 235, 1), rgba(205, 158, 245, 1));
}
.demo2_child {
  background: linear-gradient(
    135deg,
    rgba(139, 243, 235, 1),
    rgba(205, 158, 245, 1)
  );
  -webkit-text-fill-color: transparent; // 优先级比color 高
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
}
</style>

总结

• 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 | <image>

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

border-image-width：[ <length> | <percentage> | <number> | auto ]{1,4}

border-image-outset：[ <length> | <number> ]{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;