网页样式表
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制作，你可以在这里尝试