【CSS】background-clip

background-clip

文档

developer.mozilla.org/zh-CN/docs/…

示例

HTML

<div class="demo border">background-clip</div>
<div class="demo text">background-clip</div>

CSS

.demo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 240px;
  height: 120px;
  border-radius: 4px;
  border-width: 4px;
  border-style: solid;
}

.border {
  border-color: transparent;
  background:
    linear-gradient(90deg, #003755, #597581, #969094, #b1a477) padding-box,
    linear-gradient(90deg, #006484, #5aacc4, #8e888a, #e9d18b) border-box;
  color: #fff;
}

.text {
  border-color: #006484;
  background-image: linear-gradient(90deg, #003755, #597581, #969094, #b1a477);
  background-clip: text;
  color: transparent;
}

结果