語言

這是一份翻譯。 與 英文版本 相比,它可能包含錯誤或者過時。 翻譯員:Samuel Chong of Chinese Translation Services through its pro bono translation services

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

請在引索查看所有提示.

圓形角與話框陰影

本頁面受到 Arve Bersvendsen所啟發。 他有許多其它的CSS演示.

CSS3有可做出圓形邊框,有圖像的邊框,以及話框陰影的屬性,但稍微下一點功夫,你也可以在CSS2裡面不用表格或額外標記就可部份的重現以上功能。

單然,圓形邊框以及話框陰影在CSS3裡比起CSS2是簡單多了。例如,在一個段落裡如果需要紅色的厚實邊框,加上圓形角,在CSS3裡只需要以下兩行:

P { border: solid thick red;
    border-radius: 1em }

然後,要在段落右下方0.5em處加上模糊背影的話,只需要一行:

P { box-shadow: black 0.5em 0.5em 0.3em }

(你可以在這裡以及這裡嘗試它是否可行。)但如果你在老舊的流覽器內需要,也不在意它的複雜性和不靈活性的話,你可以使用以下的技巧。至少可以做為常出錯誤的流覽器的測試:

一個元素上的五個圖像

主要是使用這些內容(':before'以及':after')來在一個元素上放置額外四個圖像。假元素':before'可以在前景及背景各有一個圖像,假元素':after'也一樣,而元素本身可以有一個背景圖像,總計有五個圖像。

我們做了五個PNG圖像後將它們放置在了元素的四個角落以及右邊。以下是該圖像:

左上角:
top left corner
上邊及右上角:
top right corner
中間以及右邊:
background and right edge
左下角:
bottom left corner
下邊及右下角:
bottom and bottom right corner

以下是定位它們的CSS規則:

blockquote {
    max-width: 620px;
    background: url(rs-right.png) right repeat-y }
blockquote:before {
    display: block;
    line-height: 0;
    background: url(rs-topright.png) top right no-repeat;
    content: url(rs-topleft.png) }
blockquote:after {
    display: block;
    line-height: 0;
    background: url(rs-bottomright.png) bottom right no-repeat;
    content: url(rs-bottomleft.png) }

因為我們的背景圖像寬度是620px,我們不能使用超過620px寬的話框,否則會有空白處。這也是為何'max-width'的屬性會在那裡。'display: block'屬性可確保做出的物件可自己在主內容上下形成方框,而不是被出入到第一行和最後一行。'line-height: 0'可確保圖像上下,在'content'屬性內,沒有上升或下降的空間。

結果

看起來就會像這樣:

你有看到一個有圓形角以及白色背景和陰影的淺綠色話框嗎? 如果沒有,你的流覽器便沒有正確地處理做出的物件(或者完全沒有處理)。

這HTML源碼非常簡易:

<blockquote>
<p>你有看到一個有圓形角以及白色背景和陰影的淺綠色話框嗎? 
如果沒有,你的流覽器便沒有正確地處理做出的物件(或者完全沒有處理)。
</blockquote>
Bert Bos, style activity lead
Copyright © 1994–2017 W3C®

Created 6 January 2004;
Last updated 2017年11月09日 星期四 04:40:59

語言

關於翻譯