css3實現文字線性漸變,css3實現背景漸變

eternityQSL發表於2024-10-24
<div class='who1'>我是線性漸變文字我是線性漸變文字我是線性漸變文字我</div>
<div class='who2'>我是背景漸變我是背景漸變我是背景漸變我是背景漸變我</div>
.who1{
  width:400px;    
  background: linear-gradient(to right, #ff0000, #ffff00); /*設定漸變的方向從左到右 顏色從ff0000到ffff00*/
  -webkit-background-clip: text;/*將設定的背景顏色限制在文字中*/
  -webkit-text-fill-color: transparent;/*給文字設定成透明*/
}
.who2{ width:400px; color:#ffffff; background:linear-gradient(to left,red,black) }
線性漸變的其它方向:
to left 到左邊(結束位置)
to right 到右邊
to top 到頂部
to bottom 到底部
to left top 左上開始
to left bottom 左下開始
to right top 右上開始
to right botton 右下開始
......

相關文章