如何创建灵活的圆角？

Question

我想创建基于DIV的灵活角落。如图所示。 这不是常规的圆角，而是更复杂的东西。这就像挑战。

请注意我想要基于图像的圆角，所以请根据要求给出答案。

非常感谢

Answer 1

嗯，最简单的答案是：使用CSS3：

#roundedCornerDiv {
    -moz-border-radius: 1em;     /* for mozilla-based browsers */
    -webkit-border-radius: 1em;  /* for webkit-based browsers */
    border-radius: 1em;          /* theoretically for *all* browsers
                                    dependant on implementation of CSS3 */
    border: 12px solid #ccc;
}

Answer 2

你应该可以使用9个明确大小和浮动的div来做到这一点。角落divs是固定大小，并且有4个角落的background-url，而side divs是repeat-y，而top bottom divs有repeat-x

Answer 3

您可以使用一系列跨度和4个图像（每个角落一个）来制作可调整大小的圆角div。像这样：

div {
    background: white url(topleft.gif) top left no-repeat;
}

div span {
    display: block;
    background: url(topright.gif) top right no-repeat;
}

div span span {
    background: url(bottomright.gif) bottom right no-repeat;
}

div span span span {
    padding: 2em;
    height: 0; /* fixes a padding bug in IE */
    background: url(bottomleft.gif) bottom left no-repeat;
}

div span span > span {
    height: auto; /* sets the height back to auto for all other browsers */
}

现在为HTML：

<div><span><span><span>Round corners!</span></span></span></div>

有关实际示例和代码，请参阅this page以获取工作示例和源代码。

Answer 4

你应该考虑The Thrashbox方法。

Answer 5

border-radius: 10px 10px 10px 10px;

首先是左上角。 第二个是右上角。 第三是右下角。 第四个是左下角。

你可以在任何你想要圆角的标签中使用它。只记得指定边框：

border: 2px solid black;

如果您单独指定边框，例如：

border-left: 6px;
border-right: 6px;
border-top: 2px;
border-bottom: 2px;

你可以得到一些很棒的东西。