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

圓型角與陰影

CSS3 將具備制做“圓型邊”的特性，圓型邊是由圖像和帶有陰影盒模型組成的，但是只要您做點加工，在沒有任何表格或是額外的編碼下，您就能通過CCS2模仿其中某些圓型邊。

本頁是受到一個叫 Arve Bersvendsen的人所啓發創建的，他有許多較有趣的CSS的示範。

當然，用CSS3制做圓型邊和陰影要簡單地多。比如，要寫一個有深紅色邊並帶有圓角的段落，你只需要用CSS3的兩行與下面所寫相似就可寫成：

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

如下面所示，若要加一個模糊的只有一em二分之一長的陰影，並擺在段落的右邊，只用一行就足夠了：

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

（如果已經可行的話，您可在這裏試試。但是，如果您現在就需要，而且不介意其複雜性和缺乏靈活性的話，您可以採用以下的技術。至少它對於有編碼問題的是一種很好的檢測。

一個元素上含有5個圖像

它主要的竅門是採用已“産生的內容”的方法（‘before’and ‘after’）來把四個額外的圖像放在一個元素上。 這個‘before’pseudo-element（虛元素）可以有前後兩邊背景圖像，而這個‘after’pseudo-element（虛元素）以及這元素本身也可以有一個背景。總共5個圖像。

我們所創建的5個PNG圖像，把它放在四個角落裏並靠放在這個元素的右邊緣。以下圖像是這樣表示的：

top left corner:

top edge and top right corner:

middle part and right edge:

bottom left corner:

bottom edge 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) }

既然我們的背景圖像是620象素。在沒有間距的情況下，我們不可以讓盒模型寬度超過620象素。這就是爲什麽要有'max-width'性能的原因。‘display：block’性能的目的在於確保所産生的“內容”能形成它自己以上，以及在“主要內容”，而不是插入到第一和第二行裏。這個‘line-height：0’（零行間距）是用來確定：在“內容”性能的圖像上面和下面，往上和往下加內容已經沒有的空間了。

結果

看這裏是如何表示的

HTML的源碼也確實只需要以下:

 
<blockquote>
<p>您能否看見一暗綠色帶有圓角的盒模型和一白色背景的陰影嗎？如果看不見，那麽你的瀏覽器閱讀網頁所産生的內容是不正確。（或者說，也許完全有問題）
</blockquote>

如果你想檢測你瀏覽器是否已能夠以CSS3製作，你可以在這裏嘗試