语言

这是一份翻译。 与 英文版本 相比,它可能包含错误或者过时。 翻译员:Samuel Chong of Chinese Translation Services through its pro bono translation services

网页样式表单 CSS的提示与窍门

请在引索内查看所有提示.

背加阴影

自从这文章被写出之后,有许多的CSS都增加了CSS第3阶段的'话框后阴影'。 这使得以下的方式变得没有必要。请见"圆形角与阴影框"范例. 该页面也用CSS第2阶段做出阴影的更有力,但更复杂的方式。

CSS2没有在话框后面加阴影的功能。你可以尝试在话框的右方和下方加一道边框,可是那么做看起来会不顺。但是如果你有两个相关的元素,那么你可以利用外面的来当里面的阴影。 举例来说,如果你有以下用HTML的正文:

<div class=back>
  <div class=section>
    <h2>Die Rose duftet - doch ob sie empfindet</h2>
    <address>Heinrich Heine (1797-1856)</address>

    <p>Die Rose duftet - doch ob sie empfindet<br>
    ...
  </div>
</div>

你可以用外层的DIV作为里面的阴影。 做出来的结果看起来大概会像下一页的那样子。 首先,为BODY加一个背景 (比如例子中的浅绿色), 外层DIV用稍为暗一点的背景 (灰绿色),而在内层的DIV则用另一种背景 (例如:白黄色)。

body {background: #9db}
div.back {background: #576}
div.section {background: #ffd}

再来,利用设定边界和留白,你可以把内层DIV从外层DIV向稍往左和上面移:

div.back {padding: 1.5em}
div.section {margin: -3em 0 0 -3em}

你也需要把外层DIV稍为往右移。而且如果有几个分段的话,或许你也应该在段与段之间加上一些空间:

div.back {margin: 3em 0 3em 5em}

大至上来说就是如此。如果你想要的话,也可以在内层DIV外面加边框。或许你也应该设加留白在里面,例如:

div.section {border: thin solid #999; padding: 1.5em}

当然你可以跟据个人品味来决定阴影的大小。

正文阴影

CSS有在正文后面加阴影的功能。它有四项设置:阴影的颜色,横向烘托 (正数指向右偏),纵向烘托 (正数指向下偏) 和字体模糊效果 (零代表清晰的阴影)。举例来说:

h3 { text-shadow: red 0.2em 0.3em 0.2em }

这段正文有阴影吗?

Bert Bos, style activity lead
Copyright © 1994–2018 W3C® Privacy policy

Created 4 April 2002;
Last updated 2018年09月26日 星期三 04时41分20秒

语言

关于翻译