之前客戶提的新需求中有文字漸變效果加文字描邊效果，之前隻用過單一的，但是組合起來就爆掉了，各種嘗試找出了一種完美解決方案。
第一步，實現文字漸變
這裡要用一種 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網頁對角漸變效果
更新时间：2025-04-18 22:50:11
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
相关案例
推荐阅读
epson l1300 series恢複出廠設置（EPSONStylusPhoto）
EPSON Stylus Photo 1390 Series提示服務請求是清零問題，清零一下就好了
Photo 1390打印機如下面視頻交替閃燈
EPSON Stylus Photo 1390打印機如下面視頻交替閃燈是清零問題
，清零小就好了
Photo 1390打印機如下面視頻交替閃燈
愛普生Photo r1390清零成...
2025-04-18
新石器時代手遊巨斧加點（石器時代手遊合成斧頭）
名稱 │ 材料
──────┼───────────────────────
合成斧頭１ │1.木1 石頭1
──────┼───────────────────────
合成斧頭２ │1.木2 石頭2
──────┼───────────────────────
合成斧頭３ │1.木3 石頭3
──────┼────...
2025-04-18
靳東主演的所有電視劇歲月可回頭（靳東新劇如果歲月可回頭開播）
由靳東、蔣欣、李宗翰、李乃文、左小青、趙子琪、傅晶、陳冰等主演的都市情感劇《如果歲月可回頭》正式開播。這也是一部近幾年少有的男人劇，聚焦中年男子的心理和情感世界。看這陣容，都是妥妥的實力派，演技方面就不用擔心，那劇情會怎麼樣呢？
靳東近年演過的劇，《歡樂頌》《我的前半生》《精英律師》......一水的精英男人設，确實讓觀衆産生了審美疲勞。不過這...
2025-04-18
香蜜主演現狀楊紫（楊紫6部巅峰之作）
近日，由楊紫主演的《親愛的熱愛的》正在熱播，甜甜的愛情與激情澎湃的遊戲競技（網絡安全）的碰撞，真是為我們帶來了一場視覺盛宴呢。而除了《親愛的熱愛的》外，在楊紫的衆多作品中，有6部劇比較突出，《香蜜》排第二，最後一部至今無人超越！
六、青雲志
青雲志是一部古裝仙俠劇，而它也由一二兩部構成。在這部劇中，楊紫飾演的是擁有絕世容顔的陸雪琪，在青雲志...
2025-04-18
招搖隐身厲塵瀾看得見嗎（招搖被指控騙婚）
近日，許凱和白鹿主演的招搖是越來越精彩了，兩人愛情的小火苗也已經燃起來了，兩人同仇敵忾大戰金仙，我們霸氣的招搖回來咯，本周路招搖也是心甘情願的向厲塵瀾貢獻了自己的吻
但是，路招搖恢複真身是有時間限制的，她得知自己快要離開了，最終化作了一個漂亮的煙花點亮了厲塵瀾的天空～（哈哈哈超級符合原著的劇情）
招搖消失後，厲塵瀾還沒反應過來，仍然沉...
2025-04-18
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
