卡卡網

本文介紹如何使用CSS實現(xiàn)文字顏色漸變效果。

 
CSS實現(xiàn)文字顏色漸變效果

CSS

body {
  display: grid;
  place-items: center;
  background: black;
  text-align: center;
  padding: 120px 20px;
}

h1 {
  display: inline-block;
  font-size: 80px;
  line-height: 0.9;
  padding: 20px;
  font-family: 'Syncopate', sans-serif;
  text-transform: uppercase;
  background: radial-gradient(
    circle farthest-corner at center center,
    white,
    #111
  ) no-repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

HTML

<h1>mega<br>fancy</h1>

execcodegetcode

解釋：

1、文字顏色設置代碼是這行

background: radial-gradient(
    circle farthest-corner at center center,
    white,
    #111
  ) no-repeat;

white 和 #111

2、background-clip 屬性，它允許你控制背景圖像或顏色超出元素的填充或內容的程度。

相關文章推薦

• 3個使用CSS創(chuàng)建的霓虹燈效果/發(fā)光效果文本

標簽: css  css3  background-clip  文字漸變