CSS3中文字鏤空、透明值、陰影效果設置示例小結
Web前端實驗室 發(fā)布時間：2016-03-07 11:24:17 作者：佚名 
我要評論
我要評論這篇文章主要介紹了CSS中文字鏤空、透明值、陰影效果設置示例小結,其中通過text-stroke-color透明值的設置可以讓文字在某些程度上更加柔和,需要的朋友可以參考下
text-fill-color打造鏤空文字：
代碼
CSS Code復制內容到剪貼板
- -webkit-text-fill-color:transparent;
- -webkit-text-stroke:1px #000;
效果
text-stroke-color透明值讓文字更柔和：
代碼
CSS Code復制內容到剪貼板
- background-image:-webkit-linear-gradient(#eee,#000);
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
效果1
代碼
CSS Code復制內容到剪貼板
- background-image:-webkit-linear-gradient(#eee,#000);
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- -webkit-text-stroke:1px transparent;
效果2
對比你會發(fā)現效果2中的文字比效果1更柔和一點
text-shadow文字陰影
語法：
CSS Code復制內容到剪貼板
- box-reflect：none | [ <length>{2,3} && <color>? ][ , <length>{2,3} && <color>? ]*
我們來實現一個有陰影的文本示例：
代碼
CSS Code復制內容到剪貼板
- text-shadow:2px 2px 0 #000;
效果
text-shadow有3個length參數，第1個表示水平偏移，第2個表示垂直偏移，第3個表示模糊（可選）
柔和一點的文字陰影：
代碼
CSS Code復制內容到剪貼板
- text-shadow:1px 1px 5px #000;
效果
多重陰影：
代碼
CSS Code復制內容到剪貼板
- text-shadow:1px 1px 5px #000;
效果
相關文章
這篇文章主要介紹了CSS實現鏤空遮罩效果,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-20
這篇文章主要介紹了用純CSS實現鏤空效果的示例代碼的相關資料，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-25
這篇文章主要介紹了CSS實現鏤空效果的示例代碼的相關資料,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-24- 這篇文章主要介紹了使用CSS實現中間鏤空的圖片遮罩效果的方法,文中同時附帶介紹了一個用CSS3實現的鏤空一個圓形的代碼示例,需要的朋友可以參考下2015-12-24
- 這篇文章主要介紹了CSS背景色鏤空技術實際應用及進階相關資料，需要的朋友可以參考下2013-10-10
這篇文章主要介紹了css3遮罩層鏤空效果的多種實現方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學2020-05-11
