語言

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

語言

關於翻譯