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

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

<!-- 按钮样式 -->
<button class="button">按钮</button>
/* border */
.border-gradient {
  border: 10px solid;
  border-image: linear-gradient(red, yellow) 10;
  padding: 20px;
}

/* 文字 */
.gradient-text {
  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;
}

/* button */
.button {
  margin-top: 20px;
  width: 200px;
  height: 50px;
  font-size: 20px;
  letter-spacing: 8px;
  cursor: pointer;
   outline: none;
  background-image: -webkit-linear-gradient(bottom, #0ebeff, #b9f, #ffdd40);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  border: 2px solid;
  border-image: linear-gradient(red, yellow) 10;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.