之前客戶提的新需求中有文字漸變效果加文字描邊效果，之前隻用過單一的，但是組合起來就爆掉了，各種嘗試找出了一種完美解決方案。
第一步，實現文字漸變
這裡要用一種 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-02-21 02:18:57
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
相关案例
推荐阅读
c4 picasso 試駕（将藝術帶入工業）
MPV時代原創稿件歡迎分享，轉載請注明出處。
十款MPV九款醜，這是很多人的相同看法。不錯，由于中國消費者對MPV的理解比較淺，再加上市面上的MPV絕大多數集中在10萬以内，讓人們認為MPV就是用來拉貨的，所以不少消費者想買一款家用車大多數都會選擇轎車或者SUV。
當然，這種說法并不是正确的，還有我們熟知的中高端MPV。它們基本上都走商務路...
2025-02-21
模仿秀郭德綱盧鑫玉浩歡樂喜劇人（模仿郭德綱反而赢了）
文/娛樂酸檸檬
3月29日晚間，《歡樂喜劇人》重新開賽，在經曆了長時間的調整後，各組喜劇人們明顯是有備而來，再加上賈冰和崔志佳的強勢助陣，本期競演的5個節目質量爆棚，使得東方衛視同一時段的收視率達到了0.8676%，位居各大衛視台榜首。
當晚的《歡樂喜劇人》競演，個人認為是7期節目中整體質量最好的一期，賈冰的小品切合當下環境，時效性極強；崔...
2025-02-21
韓國blackpink人氣排名（外網票選K
怎麼每個女星都讓人超級心動的啦！
外國網站King Choice每年都會舉辦K-Pop女王選舉，由粉絲親自選出心中的K-Pop Queen。日前網站公開了2022年度的結果，去年BLACKPINK Jennie一度跌出5名以外，今年排名終于有上升但仍未登上冠軍之位？
K-Pop女皇TOP 20. Red Velvet Seulgi
K-...
2025-02-21
15萬到20萬中型suv哪一款值得選擇（綜合性價比比較高的三款中型SUV）
對于大部分的消費者來說，20萬左右的中型SUV具有很強的實用價值，畢竟國内大部分這個級别消費者的核心訴求就是為了代步，說白了就是坐着舒服、開着舒服、用着放心，今天我就為大家挑選3款綜合性價比特别高的SUV車型，本田的CR-V、别克昂科威和雪佛蘭探界者。
第一、本田CR-V
當年這個車簡直就是加價神車，耐用省心就是它的标簽，這幾年的銷量也不錯...
2025-02-21
漫威鋼鐵俠淚目瞬間（漫威最燒錢的片段）
喜歡漫威電影的小夥伴大家好，我是皮影匠！漫威電影之所以如此成功，除了精彩故事的設定以外，還有逼真的特效。衆所周知特效越多投資越高，就是因為漫威舍得花錢，才會帶來這麼多精彩的作品。那麼你知道在《複聯4》中哪些片段最燒錢嗎？
首先就是複仇者為了尋找寶石，準備穿越回到過去時的片段。除了演員是真實的以外，包括複仇者穿戴的戰甲全部都是特效合成的。根...
2025-02-21
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
