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的提示与窍门