语言

这是一份翻译。与英文版本相比，它可能包含错误或者过时。翻译员: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–2022 W3C®Privacy policy

Created 4 April 2002;
Last updated2022年02月10日 星期四 05时40分52秒

语言

关于翻译