linear-gradient()

TIP

CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。详解见MDN

border线性渐变

TIP

border-image CSS属性允许在元素的边框上绘制图像。详解

HTML

html

<div class="border-gradient">border颜色渐变.</div>

CSS

css

.border-gradient {
  border: 10px solid;
  border-image: linear-gradient(red, yellow) 10;
  padding: 20px;
}

文字颜色渐变

TIP

主要使用以下几个属性及特定属性值：

background-image: -webkit-linear-gradient(…) 为文本元素提供渐变背景
background-clip: text 用文本剪辑背景，用渐变背景作为颜色填充文本
text-fill-color: transparent 使用透明颜色填充文本

HTML

html

<div class="text-gradient">
  这是一行文字
</div>

CSS

css

.text-gradient {
  margin-top: 20px;
  text-indent: 30px;
  line-height: 50px;
  font-size: 40px;
  font-weight: bolder;
  /* 主要实现方法 */
  background-image: -webkit-linear-gradient(bottom, #5c366e, #fd8403, yellow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

linear-gradient() ​

border线性渐变 ​

文字颜色渐变 ​

效果 ​

linear-gradient()

border线性渐变

文字颜色渐变

效果