css渐变

一、文字渐变

1. 需求：实现文字渐变效果

效果示例

2. 解决办法：添加以下三个属性

• background-image 属性为该文字区域设置了一个渐变的背景色

• color：transparent 把这个区域里的文字颜色设置成了透明色

• background-clip text 将背景裁剪成了文字的前景色

3. 代码示例：

background-clip: text;
color: transparent;
background-image: linear-gradient(0deg, #f2aace 0%, #ffffff);//白粉渐变

二、背景渐变

（一）样式一：多方向渐变+边框渐变

1. 效果：

效果示例

2. 代码示例：

background: linear-gradient(
      90deg,
      rgba(39, 183, 212, 0) 0%,
      rgba(39, 183, 212, 0.2) 50%,
      rgba(39, 183, 212, 0) 100%
    );
border: 1px solid;
border-image: linear-gradient(
    90deg,
    rgba(52, 221, 255, 0),
    rgba(39, 183, 212, 0.3) 50%,
    rgba(52, 221, 255, 0) 100%
  )
  1 1;

（二）样式二：渐变+斜切

1. 效果：

效果示例

2. 代码示例：

// 渐变+斜切角
background: linear-gradient(
  -45deg,
  transparent 16px,
  rgb(66, 184, 243) 0,
  rgb(59, 208, 134) 100%
);
// 渐变后面的黑色空隙
&::after {
  display: inline-block;
  content: "";
  background-color: #08273d;
  position: absolute;
  right: 9px;
  width: 4px;
  height: 16px;
  transform: skewX(135deg);//斜切
}