语言

这是一份翻译。与英文版本相比，它可能包含错误或者过时。翻译员: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秒

语言

关于翻译