語言

這是一份翻譯。 與 英文版本 相比,它可能包含錯誤或者過時。 翻譯員: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

語言

關於翻譯