純CSS3代碼實現(xiàn)文字描邊
發(fā)布時間：2016-04-25 11:12:43 作者：佚名 
我要評論
我要評論CSS3作為新興的前端技術可以實現(xiàn)很多復雜變化的效果，比如文字描邊。這里主要用到text-shadow屬性，顧名思義就是為文字加上陰影效果，本文給大家介紹純CSS3代碼實現(xiàn)文字描邊，需要的朋友參考下
CSS3作為新興的前端技術可以實現(xiàn)很多復雜變化的效果，比如文字描邊。這里主要用到text-shadow屬性，顧名思義就是為文字加上陰影效果。例：
CSS Code復制內容到剪貼板
- text-shadow:10px 5px 2px #f60; /*text-shadow:x位移 y位移 模糊程度 顏色 */
其中:x位移和y位移表示陰影相對文字的偏移值，可以為負值。思路其實很簡單：對四個方向都作出模糊程度為零的1px陰影
CSS Code復制內容到剪貼板
- -webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,
- #000 -1px 0 0,#000 0 -1px 0; -
- moz-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
- text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
- *filter: Glow(Color=#000, Strength=1);
- /*針對各主流瀏覽器做了適配的寫法*/
原則上，text-shadow支持了多方向陰影的寫法，不過代價是代碼偏多！
相關文章
- 這篇文章主要介紹了CSS將文字描邊及填充文字顏色的方法,分別為text-stroke和text-fill-color屬性的使用方法講解,注意瀏覽器的兼容問題,需要的朋友可以參考下2016-03-07
CSS3利用text-shadow屬性實現(xiàn)多種效果的文字樣式展現(xiàn)方法
下面小編就為大家?guī)硪黄狢SS3利用text-shadow屬性實現(xiàn)多種效果的文字樣式展現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-25- 下面小編就為大家?guī)硪黄P于CSS3文本陰影text-shadow屬性詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-08-08
CSS3實現(xiàn)千變萬化的文字陰影text-shadow效果設計
這篇文章主要介紹了CSS3實現(xiàn)千變萬化的文字陰影text-shadow效果設計的相關資料，感興趣的小伙伴們可以參考一下2016-04-26CSS3 text-shadow實現(xiàn)文字陰影效果
這篇文章主要介紹了CSS3 text-shadow實現(xiàn)文字陰影效果的方法，豐富文字排版布局美化效果，感興趣的小伙伴們可以參考一下2016-02-24- 這篇文章主要介紹了舉例詳解CSS中的text-shadow文字陰影效果使用,text-shadow的運用是CSS入門學習中的基礎知識,需要的朋友可以參考下2015-08-19
- 這篇文章主要介紹了用CSS的text-shadow制作超炫文字效果全攻略,文中給出了諸多陰影效果示例,超級推薦!需要的朋友可以參考下2015-07-23
- 前段時間整理了CSS3中的漸變Gradient、透明度RGBA、邊框圓角box-radius三個新屬性的使用方法，這幾次繼續(xù)整理了有關于CSS3的text-shadow的使用方法,需要了解的朋友可以詳細2012-12-25
CSS3基礎(RGBa、text-shadow、box-shadow、border-radius)
本文介紹CSS 3部分新屬性基礎，包括RGBa、text-shadow、box-shadow、border-radius。這些屬性通常用來增強網頁布局和美譽度。（譯者注：在支持CSS3的瀏覽器如Firefox、Safa2012-11-13IE下實現(xiàn)類似CSS3 text-shadow文字陰影的幾種方法
IE9瀏覽器確實不支持CSS3 text-shadow屬性，且根據最近的IE10 preview版的反饋，IE10瀏覽器也是不支持text-shadow屬性的2011-05-11