【问题标题】：Rounded corners without position relative没有相对位置的圆角
【发布时间】：2012-06-02 10:20:42
【问题描述】：

我想要一段精确的代码来获得此页面http://www.freecsstemplates.org/preview/fotofolium/ 的圆角。当我使用 PIE.htc 文件时，它只有在我声明 position:relative; 时才有效。我在任何地方都使用它，这扰乱了布局。有人可以建议该模板没有位置属性的代码吗？

我没有提供 moz 和 webkit，但它可以在 safari、chrome 等其他平台上运行。我只给了

border-radius:5px;
behavior: url("PIE.htc");
position: relative;

使其适用于所有浏览器。如果即使使用 PIE.htc 删除位置属性，它也不仅仅在 IE 中有效。我使用 moz、webkit 作为边框，也许与 FF、Opera 等一起使用。

【问题讨论】：

border-raduis?

标签： html css

【解决方案1】：

使用border-radius

因为IE不支持border-radius，所以可以使用CSS3 PIE。这就是 PIE.htc 的来源。

【讨论】：

【解决方案2】：

您可以为所有浏览器的圆角设置 CSS 声明，并为旧版本的 Internet Explorer 使用 HTC。

Working example 用于带圆角的 div，没有设置position！

CSS

.curved {
    -moz-border-radius:10px;        /* Firefox */
    -webkit-border-radius:10px;     /* Safari and chrome */
    -khtml-border-radius:10px;      /* Linux browsers */
    border-radius:10px;             /* CSS3 */
    behavior:url(border-radius.htc) /* Internet Explorer */
}

.menu_buttons {
    margin: 40px;
    width: 100px;
    line-height: 1.1em;
    float: left;
    vertical-align: middle;    
    cursor: pointer;
    text-align: center;
    font: 0.9em Arial, Helvetica, sans-serif;
    color: #fff;
    background-color: pink;
    border: 1px solid red;
}

示例 HTML

<div class="menu_buttons curved">.menu_buttons element</div>

下载border-radius.htc，查看CSS curved corner Demos and Page。

已测试

Windows XP 专业版 2002 Service Pack 3

Internet Explorer 8.0.6001.18702
Opera 11.62
火狐 3.6.16
Safari 5.1.2
谷歌浏览器 18.0.1025.168 m
K-Meleon 1.5.4

Windows 7 家庭版服务包 1

Internet Explorer 9.0.8112.164211C
Opera 11.62
火狐12.0
Safari 5.1.4
谷歌浏览器 18.0.1025.168 m

Linux Ubuntu 12.04

火狐12.0
Chromium 18.0.1025.151（开发者内部版本 130497 Linux）

【讨论】：

您的示例工作正常（除了背景颜色丢失变黑），但我不知道为什么当我按照您提供的编辑代码时它不起作用。