網頁樣式表
CSS的提示與竅門

背加陰影

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 }