CSS: 文字陰影

這是一份翻譯。與英文版本相比，它可能包含錯誤或者過時。翻譯員:Samuel Chong of Chinese Translation Services through its pro bono translation services

Text shadows

CSS level 3 有一種屬性叫做"文字陰影," 是用來為有些文字的每個字母加上陰影. 在它最簡單的形式裡, 它看起來是像這樣的:

h3 {text-shadow: 0.1em 0.1em #333}

它增加了一個相對于正常文本有一點向右(0.1em)和向下(0.1em) 暗灰色(#333)的陰影. 結果看起來如下:

The noak and the barcicle

模糊文字陰影

最簡單形式的'文字陰影'的屬性有2個部份: 一種顏色 (像是上述的#333) 和一個偏距 (在上述範例中的0.1em 0.1em). 這將導致在指定的偏距上有清楚的陰影. 但是這個偏距也可以是模糊的而或多或少導致比較不清楚的陰影.

模糊的程度能當作另一個偏距. 這裡有2條線, 一條只有一點點模糊(0.05em)和一條模糊很多(0.2em).

h3.a {text-shadow: 0.1em 0.1em 0.05em #333}
h3.b {text-shadow: 0.1em 0.1em 0.2em black}

“What do you say?” said the UK

In order to see more clearly

可讀的白色文字

如果前景和背景的對比很小, 陰影能使文字更容易閱讀. 這裡有一個例子是白色的文字對上淡藍色的背景, 先是沒有陰影, 然後是有陰影(的對照):

h3 {color: white}
h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}

Without shadow:

What is in it for me?

With shadow:

With a shovel and some oranges

多重陰影

你可以有多於一個的陰影. 通常來說, 那看起來有些奇怪:

h3 {text-shadow: 0.2em 0.5em 0.1em #600,
      -0.3em 0.1em 0.1em #060,
      0.4em -0.3em 0.1em #006}

I wish wish wish…

但當有2個放置適當的深色和淺色陰影時, 效果可能是很有幫助的:

h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #444}

I, Augustus (you know who)

That's extra, of course

這是有一點危險的, 就像你可以看到的, 如果你的流覽器不能支援'文字陰影'的話。事實上, 在這個例子裡, 背景的顏色和文字的顏色幾乎是一樣的 (#CCCCCC 和 #D1D1D1), 所以沒有文字陰影就幾乎沒有任何對比.

繪畫字母做為輪廓

之前那個版本的2個文字陰影的例子可以更進一步的被使用. 有4個陰影時, 字母能有一個輪廓:

h3 {text-shadow: -1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black}

Are you feeling red?

A cat, an apple, etcetera

這不是一個完美的輪廓, 並在此時 (2005年8月), 是否CCS應該有一個單獨的屬性（或者一個'text-decoration'的參數）來做比較好的輪廓的討論還是開放的.

霓虹發光

如果你把一個模糊陰影放在文字的正後方, 像是偏距為0時, 其效果則是創造一個周圍會發光的字母. 如果單一的陰影不夠強烈, 那就重複同樣的陰影幾次:

h3.a {text-shadow: 0 0 0.2em #8F7}
h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
        0 0 0.2em #87F}

With a zest of best

There's no no like a better no

Indeed, quite right, Mr M

網站導覽

Created 4 August 2005;
Last updated2022年02月10日星期四 05:40:52

語言

關於翻譯

網頁樣式表CSS的提示與竅門