之前客戶提的新需求中有文字漸變效果加文字描邊效果，之前隻用過單一的，但是組合起來就爆掉了，各種嘗試找出了一種完美解決方案。
第一步，實現文字漸變
這裡要用一種 CSS3新出的 屬性： background-clip: text
background-clip 的定義：規定背景的繪制區域；簡而言之，background-clip 就是規定background-color/background-image 背景（色/圖）在盒模型裡的作用範圍...
那麼使用了 background-clip: text 這個屬性的意思是，以區塊内的文字作為裁剪區域向外裁剪，文字的背景即為區塊的背景，文字之外的區域都将被裁剪掉。
知道了這個特性之後，我們把背景設為圖片背景或者漸變背景之後在隻用這個屬性就可以得到一個背景文字效果或者漸變文字效果！
eg :
背景圖
background-clip: text 轉背景文字效果:
漸變效果：
實現了 漸變文字之後我們就該實現文字外邊框了：
第二步，實現文字描邊-webkit-text-stroke
CSS屬性為文本字符指定了寬 和 顔色 . 它是-webkit-text-stroke-width 和-webkit-text-stroke-color 屬性的縮寫。
- text-stroke-width： 設置或檢索對象中的文字的描邊厚度。
- text-stroke-color：設置或檢索對象中的文字的描邊顔色。
雖然-webkit-text-stroke是webkit内核浏覽器的私有屬性，但是FireFox也支持這個樣式，唯獨IE浏覽器不支持。所以在移動端是可以放心使用這個屬性的。
如圖所示，-webkit-text-stroke的第一個字段設置描邊的寬度，第二個設置描邊的顔色。
實現漸變文字描邊
兩種屬性配合使用便可。
ps: text-shadow, border 是無法做到漸變的同時進行描邊的。。。
,
css網頁對角漸變效果
更新时间：2024-05-02 10:49:09
Comments
Welcome to tft每日頭條 comments! Please keep conversations courteous and on-topic. To fosterproductive and respectful conversations,
you may see comments from our Community Managers.
Sign up to post
Show More Comments
相关案例
推荐阅读
嘉興市區中心在哪裡
嘉興市區中心在哪裡?房源的受關注情況，在一方面反映一個小區的受歡迎程度，根據上周（3月21日-3月27日）用戶的關注度，整理出中心城區的熱搜小區TOP10，江南太陽城、東菱·天官坊、風清雲都為用戶最關注的小區，這些小區到底有哪些吸引人的魅力...
2024-05-02
12生肖運勢大全之馬
給自己算命：十二生肖逐年、逐月、逐日、逐時福祿解之午馬篇（易園三分地）午．馬馳騁沙場百戰威鐵騎闖破萬重圍功成歸放南山日猶憶當年草上飛馬年生人；庚午年生：（1930年、1990年）五行屬路傍土，堂裡之馬。為人口快心直，利官近貴，衣祿豐盈，男人...
2024-05-02
廣州永甯口袋公園
10月10日，在位于廣州市花都區的紫蘭口袋公園裡，家長帶着孩子玩耍。近年來，廣州持續推動城市口袋公園建設，充分利用城市的邊角地、閑置地實施“見縫插綠”，形成了一處處可供周邊居民休閑、散步、健身及開展親子活動的生态活力空間，構築城市綠色新街景...
2024-05-02
橡皮泥做海星手工
今天來做個橡皮泥海洋生物海星，一起來做吧2用工具壓出花瓣形狀，再用手捏出喜歡的形狀，3用工具紮出肌理，或是用牙刷刷也行4在用黃色揉出大小不一的圓形壓扁做裝飾5再用工具紮出小眼6在用白色、黑色揉圓壓扁做眼睛，可愛的海星就做好了，是不是很簡單一...
2024-05-02
各種英文字母設計
系統自學插畫設計(視頻教程)！提升吧,
2024-05-02
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
