如何通过纯 css 和 html 进行圆角布局？答案

【问题标题】：how to make round-corner layout by pure css and html?如何通过纯 css 和 html 进行圆角布局？
【发布时间】：2009-06-22 23:47:24
【问题描述】：

以一种兼容且最方便的方式？

【问题讨论】：

复制自stackoverflow.com/questions/7089/…

标签： html css

【解决方案1】：

纯css和html？（假设您不是指使用角落的图像或背景图像......）

许多浏览器支持圆角边框例如

-moz-border-radius
-webkit-border-radius
border-radius

这些在 IE 中都不起作用

（请参阅 Jeff 的回复 here 和 cmets。）

【讨论】：

那么兼容的版本必须是javascript？如果是，请继续。
使用 javascript 制作圆角对我来说似乎完全是浪费资源。而那些依赖画布的实现根本没有任何意义，因为支持画布的浏览器也支持圆角。如果圆角很重要，那么您就会被图像困住。我建议使用上面列出的 css 属性并接受它会在不支持的浏览器中正常降级。
@mike 鉴于根据最近的几乎所有报告，Opera 的市场份额不到 2%，我高度怀疑它是否像 IE、Firefox 或 Safari 一样重要。当然，这始终取决于您的客户使用什么浏览器...
IE 通过插件支持画布。但我同意。让 IE 有尖角，直到它支持圆角。

【解决方案2】：

目前，Firefox 和 safari 通过浏览器扩展支持圆角

圆角是CSS3规范的一部分，所以如果你现在想用纯CSS和HTML实现圆角，只能使用浏览器扩展（-moz-border-radius for Firefox -webkit for safari）

您也可以使用 JavaScript 插件实现同样的目的

【讨论】：

【解决方案3】：

不记得我在哪里找到了这种技术，但this page 列出了几个类似的解决方案：

<html>
    <head>
        <title>hm</title>
        <style type="text/css" media="screen">
            body{
                background:#000;
            }
            .heading{
                color:#1d4b76;
                padding-top:1em;
                width:10em;
                text-align:center;
            }
            .heading h2 {
                font-size:2em;
                padding:.2em;
                margin:0;
                background-color:#1e1e1e;
            }
            /* Rounded header */
            b.rtop b, b.rbottom b{display:block;height: 1px; overflow: hidden; background: #1e1e1e}
            b.r1{margin: 0 5 0 5px}
            b.r2{margin: 0 2 0 3px}
            b.r3{margin: 0 1 0 2px}
            b.rtop b.r4, b.rbottom b.r4{margin: 0 0 0 1px; height: 2px; background:#1e1e1e;}
        </style>
    </head>
    <body>
        <div class="heading">
            <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
            <h2>Example!</h2>
            <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
        </div>        
    </body>
</html>

对于我使用它的网站，我删除了右侧边距以将它们用于右对齐标题（b.r1{margin: 0 0 0 5px} 等）：

Example of rounded corner http://img81.imageshack.us/img81/1796/picture4o.png

【讨论】：

【解决方案4】：

如果允许图像在您选择的图形程序中制作 4 个角，请将其设置为一些 span/div 标签的背景图像，并通过 position:absolute; 正确对齐它们。在设置为位置的容器中：相对；。如果您只想使用 CSS，您基本上可以这样做，但不是选择背景图像，而是必须设置每个像素。在 5 x 5 的角落中，您大约需要 10-12 个标签来存放此标签。换句话说，每个面板大约 40 个，这可能导致一个面板的 1 (CSS)+1(div/span)K 字节开销。虽然我个人不会采用这种方法，但它是可行的，并且可能适用于大多数浏览器。

【讨论】：

【解决方案5】：

您可以使用 CSS3 规则：

-khtml-border-radius: 5px; /* 用于 Konqueror（Linux 浏览器）*/
-moz-border-radius: 5px; /* 适用于任何版本的 Firefox */
-webkit-border-radius: 5px; /* 适用于 Safari 和 Google Chrome */
边框半径：5px； /* 对于支持 CSS3 的浏览器 */

【讨论】：

【解决方案6】：

http://kalsey.com/2003/07/rounded_corners_in_css/

虽然使用了 4 张小图片

【讨论】：

【解决方案7】：

您好，我最近不得不克服同样的问题，一个带有圆角、内边框、投影和渐变背景的可调整大小的小部件。它还必须适用于所有浏览器（包括 IE6）。

假设您正在使用 Photoshop 并妥善保管您的源文件，这相当容易。总共需要 4 张图片（最多 7 张，具体取决于您对 IE6 的支持方式），这些都可以从原始 Photoshop 文件中切片，因此非常容易。

查看下面的链接。

http://thatguynamedandy.com/blog/css-widget-rounded-corner-gradient-drop-shadow

【讨论】：