CSS3 實用技巧：漂亮的文本漸變效果

您可能感興趣的相關文章

• 2012年最酷的25個 CSS3 學習教程
  
• 35個讓人驚訝的 CSS3 動畫效果演示
• 推薦12個漂亮的 CSS3 按鈕實現方案
• 20個非常絢麗的 CSS3 特性應用演示
• 24款非常實用的 CSS3 工具終極收藏

漂亮的文本漸變效果

h2[data-text] {
  position: relative;
}
h2[data-text]::after {
  content: attr(data-text);
  z-index: 10;
  color: #e3e3e3;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));

 

更多實用 CSS3 技巧：幫助你美化網站的10+實用 CSS3 技巧

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源