语言

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

语言

关于翻译