大多數看起來很複雜的 CSS 文字效果都是由一種屬性製成的。登陸頁面上的霓虹燈標誌、遊戲標題上的硬輪廓、看起來像 20 世紀 70 年代唱片封套的堆疊橙色字體:每個都是單一的 text-shadow 具有多個逗號分隔層的聲明。語法很短。困難的部分是拾取讀得好的偏移量和模糊值,並記住哪一層在頂部繪製。
本指南涵蓋了 text-shadow 語法、分層的工作原理、常見效果背後的配方及其使用的確切值,以及導致陰影文字難以閱讀或渲染緩慢的錯誤。每個範例都可以在 中重建 CSS 文字陰影產生器,即時顯示結果並為您撰寫聲明。
TL;DR:
text-shadow採用逗號分隔的陰影列表,每個陰影寫為offset-x offset-y blur-radius color。清單中的第一個陰影繪製在頂部。它沒有擴展值,也沒有inset關鍵字不同box-shadow。 發光是幾個逐漸模糊的零偏移陰影,輪廓是四個單像素硬陰影,3D 文字是一堆硬陰影,每個硬陰影都在更遠的地方。這 Toolz 文字陰影產生器 使用滑桿和八個預設建立這些,客戶端,免費,無註冊。
CSS 文字陰影屬性是什麼？
的 text-shadow property 在元素' 的文字字形後面繪製一個或多個陰影。它是在 W3C 中定義的 CSS 文字裝飾模組 3 級,它的值是其中之一 none 或以逗號分隔的陰影清單。
每個陰影最多有四個部分:
| 部分 | 必需的 | 它做什麼 | 允許的值 |
|---|---|---|---|
| 水平偏移 | 是的 | 向右(正)或向左(負)移動陰影 | 任何長度,例如。 2px, -0.1em |
| 垂直偏移 | 是的 | 將陰影向下(正)或向上(負)移動 | 任何長度 |
| 模糊半徑 | 不,預設為 0 |
軟化邊緣;越大意味著越模糊 | 零或正長度。負數無效 |
| 顏色 | 不,預設為 currentColor |
陰影顏色,包括透明度 | 任何 CSS 顏色 |
顏色可以先行,也可以最後行。 text-shadow: #000 1px 1px 和 text-shadow: 1px 1px #000 是同一個影子。如果你把顏色省略,陰影就會帶走文字'自己的顏色,這很少是你想要的陰影,但可以方便地快速發光文字顏色。
陰影永遠不會改變佈局。它不會將相鄰元素推開或增加元素's 框,因此大的模糊可能會溢出到框外並被父級切斷 overflow: hidden.
文字陰影與框陰影有何不同?
text-shadow 遵循每個字母的形狀,同時 box-shadow 遵循元素的矩形's邊框框。這就是實際差異,它決定了您要達到的目標。語法也不同。
| 特色 | text-shadow |
box-shadow |
|---|---|---|
| 陰影的形狀 | 每個字形輪廓 | 元素's 框,包括圓角 |
| 展開半徑 | 不可用 | 是的,第四長度 |
inset 關鍵字 |
不可用 | 是的 |
| 多層 | 是的,逗號分隔 | 是的,逗號分隔 |
| 油漆訂單 | 首先列在上面 | 首先列在上面 |
| 預設顏色 | currentColor |
currentColor |
| 典型用途 | 標題、標誌、影像的易讀性 | 卡片、按鈕、高度 |
缺失的擴展值是文字輪廓需要四個陰影而不是一個陰影的原因。與 box-shadow 你可以寫 0 0 0 2px black 種植一個堅固的環。對於文本,無法擴展字形,因此您可以透過在多個方向上偏移副本來偽造它。如果您正在設計容器而不是文字,則 箱形陰影產生器指南 覆蓋展開層、嵌入層和立面層。
分層多個文字陰影如何運作?
單一聲明可以容納任意數量的陰影,以逗號分隔,瀏覽器會繪製距離觀看者最近的第一個陰影。清單中的最後一個陰影位於後面。文字本身總是繪製在所有這些之上。
每當層重疊時,排序就很重要。比較這兩個聲明:
/* Sharp dark layer on top of a soft glow */
text-shadow: 2px 2px 0 #000, 0 0 12px #ff0;
/* Soft glow painted over the sharp layer */
text-shadow: 0 0 12px #ff0, 2px 2px 0 #000;
在第一個中,清晰的黑色副本保持鋒利,黃色薄霧位於其後面。在第二個中,黃色光芒沖刷黑色副本並使其軟化。相同的陰影,不同的外觀。
生成器遵循相同的規則。圖層標籤中的第 1 層是輸出中的第一個陰影,因此它繪製在頂部。新增一層會將其附加到清單末尾的其他層後面。若要向前移動圖層,您要刪除它並重新建立它,或手動編輯複製的 CSS。
Toolz 產生器寫入什麼值?
的 文字陰影產生器 為每一層提供五個控制並以固定格式編寫聲明。當您將結果貼上到具有自己約定的程式碼庫中時,了解該格式會有所幫助。
| 控制 | 範圍 | 步 | 寫為 |
|---|---|---|---|
| 偏移 X | -50px 到 50px | 1px | Npx |
| 偏移 Y | -50px 到 50px | 1px | Npx |
| 模糊 | 0px 到 100px | 1px | Npx,包括 0px |
| 顏色 | 選色器 | - | 6 位十六進制 |
| 不透明度 | 0% 至 100% | 1% | 在顏色後面加上兩個十六進位數字 |
不透明度以 8 位十六進位值的形式折疊到顏色中,如下所示 CSS 顏色模組等級 4 十六進位表示法. 最後兩位數字是 0 到 255 刻度的 alpha 通道,因此工具將不透明度乘以 255,輪次並轉換為十六進位。
以下是針對一些不透明現象的結果:
| 不透明度滑塊 | 次255 | 圓圓的 | 十六進制阿爾法 | 顏色範例 |
|---|---|---|---|---|
| 100% | 255 | 255 | ff |
#000000ff |
| 90% | 229.5 | 230 | e6 |
#4466eee6 |
| 70% | 178.5 | 179 | b3 |
#4466eeb3 |
| 60% | 153 | 153 | 99 |
#00000099 |
| 35% | 89.25 | 89 | 59 |
#00000059 |
| 25% | 63.75 | 64 | 40 |
#00000040 |
目前每個瀏覽器都讀取 8 位十六進位。如果您必須支援非常舊的瀏覽器,請將顏色重寫為 rgba() 複製後: #00000099 成為 rgba(0, 0, 0, 0.6).
該工具僅接受滑桿和拾取器輸入,因此值為全像素。對於測量的陰影 em,它會根據字體大小縮放,複製 CSS 並交換樣式表中的單位。 A 2px 偏移量為 16px 正文 0.125em.
如何創造霓虹燈發光文字效果?
霓虹燈是幾種偏移為零、顏色相同且越來越模糊的陰影。每一層都會增加一個更寬、更暗的光環,它們一起看起來就像光線滲入周圍的空氣。
生成器打開其 Neon Glow 預設,產生以下結果:
text-shadow: 0px 0px 7px #4466eeff, 0px 0px 14px #4466eee6, 0px 0px 28px #4466eeb3;
三層,每次模糊加倍(7、14、28),不透明度從 100% 下降到 90%,再下降到 70%。緊密的 7px 層為字母提供了明亮的核心,而 28px 層則將顏色展開。在帶有白色文字的深色背景上,這讀作一個點燃的管子。在淺色背景上,大部分效果消失,這就是為什麼預覽有一個淺色 bg/深色 bg 切換:在將輝光發送到具有主題切換的網站之前檢查兩者。
為了使發光更強,請在 56px 模糊處添加第四層或重複 7px 層兩次。重複一層會疊加其不透明度,並使核心更加強烈,而不會加寬核心。
如何使用文字陰影勾勒文字輪廓?
放置四個硬陰影(模糊) 0) 每條對角線上有一個像素。它們的重疊追蹤每個字形的邊緣。
大綱預設寫道:
text-shadow: -1px -1px 0px #000000ff, 1px -1px 0px #000000ff, -1px 1px 0px #000000ff, 1px 1px 0px #000000ff;
這在一個像素上效果很好。在兩到三個像素處,曲線和直邊的中點開始顯示間隙,因為四個副本僅覆蓋對角線。為了獲得更厚的輪廓,請在直軸上再添加四層 (0 -2px, 2px 0, 0 2px, -2px 0) 所以每個字母周圍有八份。
有一個非陰影替代方案。 -webkit-text-stroke 沿著字形路徑繪製真正的筆畫,並且當前瀏覽器支援(儘管有前綴)。它以輪廓為中心,因此它會吃掉薄字母,並且在 WHATWG 相容性標準中而不是在 CSS 模組中指定。對於顯示文字上的小而清晰的輪廓,四影技巧仍然是最可預測的選擇。
如何製作 3D 或擠壓文字?
以相同的顏色堆疊幾個硬陰影,每個陰影向下和向右偏移一個像素。每個副本都會增加一個像素深度,眼睛將堆疊讀取為實心字母的側面。
復古 3D 預設:
text-shadow: 1px 1px 0px #e99537ff, 2px 2px 0px #e99537ff, 3px 3px 0px #e99537ff, 4px 4px 0px #00000040;
三個橙色層形成三像素擠出,第四個黑色層以 25% 不透明度放置在一個像素之外,作為接觸陰影,將字母接地。對於更深的擠出,請繼續添加帶有偏移 4、5、6 的橙色層,並將深色層移至末端。 12px 擠出 12 層對於大型英雄標題來說是正常的。
長影預設使用相同的想法,但有間隙和褪色的不透明度:
text-shadow: 1px 1px 0px #00000033, 3px 3px 0px #00000026, 6px 6px 0px #0000001a, 10px 10px 0px #0000000f;
偏移量增加(1、3、6、10),而不透明度下降(20%、15%、10%、6%),因此陰影對角線拖曳,而不是形成實心塊。
哪種文字陰影配方適合哪種效果?
以下是生成器中的所有八個預設,以及每個預設背後的想法,以便您可以調整它們。
| 預設 | 層數 | 偏移量 | 模糊 | 想法 |
|---|---|---|---|---|
| 軟的 | 1 | 0,2px | 4px | 35% 黑色微妙的陰影,對大多數標題來說都是安全的 |
| 很難 | 1 | 2px,2px | 0 | 60% 黑色,清脆膠印,平版印刷外觀 |
| 霓虹燈 | 3 | 0, 0 | 7、14、28px | 顏色相同,越來越模糊,顏色淺 |
| 復古3d | 4 | 1 至 4px 對角線 | 0 | 步進硬拷貝加上微弱的接觸陰影 |
| 大綱 | 4 | +/-1px 對角線 | 0 | 追蹤字形邊緣的四個副本 |
| 浮雕 | 2 | -1px/-1px 和 1px/1px | 0 | 白色突出顯示左上角,深色突出顯示右下角 |
| 火 | 3 | 0, -1 / -2 / -4px | 4、10、18px | 黃色到橙色到紅色,向上上升 |
| 長影 | 4 | 1、3、6、10px 對角線 | 0 | 間隙不斷擴大,不透明度逐漸減弱 |
壓花是人們誤讀的一個。它將左上角的淺色陰影與右下的深色陰影配對,模仿左上角擊中凸起字母的光線。交換兩種顏色,文字看起來被壓入頁面,這是經典的凸版印刷效果。兩者僅在文字顏色接近背景顏色時才起作用;在高對比度文字上,高光會消失。
火是唯一具有負垂直偏移的預設。每一層都向上移動,變得更加模糊和發紅,因此熱量似乎從字母上升。
文字陰影會損害可讀性或可訪問性嗎?
它可以,而且風險隨著模糊和抵消而增加。陰影不會改變 WCAG 測量的對比度,該對比度是在文字顏色和背景顏色之間計算的。這 WCAG 2.1 對比最小值 普通文字要求 4.5:1,大文字要求 3:1,光芒並不能幫助您在紙上滿足這一點。
實際上,忙碌照片上的淺色文字後面有一個薄薄的暗影,使字母更容易辨認,因為它將字形邊緣與圖像分開。小文字上的重光芒則相反:光環填滿了像 "e" 等字母的計數器。和&引用;a&引用;這個字變成了糊狀。
一些成立的指導方針:
- 保持正文陰影微妙。類似的東西
0 1px 2px rgba(0, 0, 0, 0.3)很多。 - 為大顯示文字(約 32 像素及以上)保存多層效果。
- 如果您的網站有主題切換,請檢查對淺色和深色背景的影響。
- 不要依靠陰影來挽救低對比度。先修復文字顏色。
- 以手機上航向所達到的最小尺寸進行測試,其中陰影比例最大。
是什麼減緩了文字陰影?什麼是常見錯誤?
模糊是昂貴的部分。每個模糊層都必須在每次重新繪製時進行光柵化和模糊化,並且成本隨著模糊半徑和文字量而縮放。這 文字陰影的 MDN 參考 涵蓋語法。性能方面很容易推理:單一標題上的三層發光很便宜,並且在滾動過程中重新繪製的長文章的每個段落上相同的發光是低功率手機上常見的卡紙來源。
錯誤一次又一次出現:
| 錯誤 | 症狀 | 修復 |
|---|---|---|
寫出這樣的價差值 0 0 4px 2px red |
整個聲明被忽略 | 刪除第四個長度;文字陰影沒有傳播 |
添加 inset |
聲明被忽視 | 不支援文字;而是使用較輕的浮雕 |
負模糊,例如 -2px |
聲明被忽視 | 模糊必須為零或正 |
| 層間缺少逗號 | 聲明被忽視,沒有任何結果 | 用逗號分隔每個陰影 |
| 邊緣有光澤 | 光環切成直線 | 父母有 overflow: hidden;添加填充 |
| 發光隱形 | 似乎什麼也沒發生 | 光背景上發光;在黑暗中測試 |
供應商前綴 -webkit-text-shadow |
無害但無用 | 使用簡單 text-shadow;它不需要前綴 |
前三個值得強調。單一無效部分使整個聲明無效,而不僅僅是該層,因此十二層 3D 效果第四層的拼字錯誤會刪除所有十二個。生成器's 輸出始終有效,這是在那裡建立堆疊並將其貼上到的原因之一。
什麼時候應該使用生成器而不是手動編寫文字陰影?
單一軟陰影的打字速度比點擊速度快。任何具有三層或更多層的東西都可以更快地在視覺上構建,因為你正在判斷一個外觀,而一個外觀很難從數字中判斷。生成器對於學習也很有用:選擇預設,更改一層,然後觀察效果的哪一部分移動。
Toolz 產生器完全在瀏覽器中運作。預覽、圖層清單和 CSS 均在頁面上計算,不會上傳任何內容,載入後仍保持離線工作。它是免費的,無需註冊。與網站上的其他工具一樣,複製 CSS 會計入每日使用限額;編輯和預覽則不然。
它沒有做什麼:它沒有 em 或者 rem 單位、無鍵入的數字欄位、無圖層拖曳重新排序、預覽中沒有自訂字體。對於這些,複製聲明並在您自己的樣式表或瀏覽器開發工具中調整它。
如果您想要的效果是模糊或重新著色的元素而不是陰影, CSS 過濾器 例如 drop-shadow() 和 blur() 適用於整個元素,包括圖像。文字後面的磨砂面板是一項工作 玻璃態發生器,軟擠壓按鈕屬於 新態生成器. 全套視覺化CSS建構器已上線 CSS 工具中心,並且 CSS 梯度產生器指南 當您想要發光標題後面的漸層背景時,可以與文字效果很好地配對。
一個可行的例子:照片上可讀的英雄標題
假設您在明亮的海灘照片上有白色 64px 文字,並且字母不斷消失在沙子裡。目標是易讀性第一,風格第二。
從開始 文字陰影工具 與軟預設: 0px 2px 4px #00000059. 在太微弱的忙碌影像上。將不透明度提高到 60%,模糊到 8px,這給出了 0px 2px 8px #00000099. 邊緣與背景分開,但細筆畫仍然閃爍。
新增第二層,偏移量為零、2px 模糊和 50% 黑色: 0px 0px 2px #00000080。 因為你是第二次添加的,所以它在第一層後面作畫,但它緊貼字形邊緣,並為每個筆畫提供一個薄薄的深色邊緣。結果:
.hero-title {
color: #fff;
font-size: 64px;
text-shadow: 0px 2px 8px #00000099, 0px 0px 2px #00000080;
}
兩層,渲染成本都很低,標題可以承受沙子、天空和海浪。在標題降至 36px 的手機上,相同的像素值按比例更重;轉換為 em 讓他們保持同步(0 0.03em 0.125em 64px)。
