带有 JQUERY 或其他东西的简单圆角边框答案

【问题标题】：simple rounded borders with JQUERY or something else带有 JQUERY 或其他东西的简单圆角边框
【发布时间】：2009-06-02 13:21:26
【问题描述】：

重复：

你知道为 div 元素制作圆角边框的方法吗？我使用了 ruzee，但在使用 CalenderExtender(asp.net ajax) 和 GMDatePicker 组件时遇到问题。

【问题讨论】：

标签： css rounded-corners

【解决方案1】：

在 CSS 3 中会有一个标准。今天，您可以通过以下方式实现（仅适用于基于 Mozilla 和 Webkit 的浏览器）：

.roundBorder {
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
}

否则你可以使用带有背景图像的多个 div，但 JQuery 会提供更简单的方法（我不知道:()

多重 div 方式可能如下所示：

html:

<div class="topLeft">
    <div class="topRight">
        <div class="bottomLeft">
            <div class="bottomRight">
                 <div class="content">
                 </div>
            </div>
        </div>
    </div>
</div>

css:

.topLeft {
    background-image: url('topLeft.png');
    background-position: top left;
    background-repeat: no-repeat;
}

.topRight {
    background-image: url('topRight.png');
    background-position: top right;
    background-repeat: no-repeat;
}

.bottomLeft {
    background-image: url('bottomLeft.png');
    background-position: bottom left;
    background-repeat: no-repeat;
}

.bottomRight {
    background-image: url('bottomRight.png');
    background-position: bottom right;
    background-repeat: no-repeat;
}

【讨论】：

你的问题是指什么？如果您询问 [...]-border-radius：由于这仅适用于 mozilla 或 webkit，因此不适用于 IE（不适用于 Opera）。如果您询问第二部分（堆叠的 div）：这应该适用于每个常见的浏览器。

【解决方案2】：

您可以使用 CSS3 边框半径属性，但 IE 尚不支持此属性。

【讨论】：

好消息。你会添加 CSS3 的新特性吗？

【解决方案3】：

对于 JQuery，您可以使用“角落”。见here

【讨论】：

不知道为什么，注册不了（即使在页面中添加了js文件）