之前客戶提的新需求中有文字漸變效果加文字描邊效果，之前隻用過單一的，但是組合起來就爆掉了，各種嘗試找出了一種完美解決方案。
第一步，實現文字漸變
這裡要用一種 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-11-30 02:13:16
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
相关案例
推荐阅读
利用三星手機的bixby功能找手機（消息稱三星将向第三方開發者開放BixBy助手）
IT之家11月2日消息 三星在今年8月發布了一款智能音箱Galaxy Home，内置了三星自家的Bixby助手。在這一市場上，亞馬遜已經以自家的Echo系列音箱，以及Alexa助手占據着主導，這不由得讓人擔心後發的三星前景如何。不過，華爾街日報的一個新消息似乎展示了Galaxy Home和Bixby的一條路徑。
消息稱，三星将在下周的三星開發者...
2024-11-30
龜仙人老頭跳廣場舞卡點（隐秘角落老陳也死了）
《隐秘的角落》真的是網劇中的良心之作，網上對于該劇都是一緻的好評，就連國際巨星章子怡都親自誇贊，稱起可以與歐美劇相抗衡了。能夠讓該劇有目前這樣成就的原因主要有兩方面，一方面是演員們的精湛演技，秦昊王景春，張頌文以及三位小演員都是實力演技派，尤其要稱贊三位小演員的演技，真的可以給如今隻追求流量的小鮮肉們演得好太多了；第二個方面就是劇本的選取和改編非常成功，...
2024-11-30
賽爾号本周最新活動（賽爾号6月29日活動預告公開）
賽爾号6月29日的相關預告在近日公開了，本次不僅僅有大暗黑天的最後一位長老登場，更有X戰隊合體進化後的王系精靈實裝，一起來看看相關的預告活動吧。
常長老艾夏拉降臨
黑色的能量，席卷整個宇宙。遠古的封印，此刻終于解封。大暗黑天，八王齊現！她既是大暗黑天最後一員，她又是天蛇星的末代女王。此刻，她将撕裂整個空間。本周主打精靈，怎麼說呢，除了屬性是...
2024-11-30
與生活相關的關于茶的故事（與茶有關的故事）
茶，是人面對自然态度，也是面内心的态度。但歸根究底，喝茶隻是一種生活方式。與友對坐，除了欣喜何以為繼？寒夜獨處，除了孤獨以何為伴？塵世之間，除了匆忙何以安心？……隻說一句：來，喝茶吧，喝茶吧…
專門記錄茶的好電影很少，想來茶天生本就是一個好的配角吧，隻以靜默作陪。且讓我們遇見她，在這最美的時刻…
① 尋訪千利休“您心裡，有沒有念念不忘的人”
...
2024-11-30
驚蟄劉芬芳扮演者（驚蟄中的劉芬芳）
《驚蟄》中的劉芬芳，《完美關系》中的崔英俊，他一人千面受關注。
文/岩姐 原創内容，抄襲必究！
有些人，不要顔值靠實力，一旦發現他的優秀，就會被他圈粉。
董可飛就是這樣一位演員，年輕時候也是小鮮肉一枚，從出道至今參演作品很多，除了電影、電視劇，還曾經登上過很多聯歡晚會，出演小品也是一絕。
說董可飛是一人千面一點也不過分，從他15歲參...
2024-11-30
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
