語言

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

Created 6 January 2004;
Last updated2022年02月10日 星期四 05:40:52

語言

關於翻譯