Question

重复：

你知道如何为div元素制作圆角边框。我使用过ruzee但是使用CalenderExtender（asp.net ajax）和GMDatePicker组件时遇到了问题。

Answer 1

在CSS 3中，将有一个标准。今天你可以使用：

来完成它（仅适用于基于Mozilla和Webkit的浏览器）

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

否则你可以使用带有backgound-images的多个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;
}

Answer 2

您可以使用CSS3 border-radius属性，但IE尚不支持。

Answer 3

对于JQuery，你可以使用'Corner'。见here

使用JQUERY或其他东西的简单圆形边框

3 个答案: