如何用css绝对定位无图像的角落答案

【问题标题】：How to absolute position imageless corners with css如何用css绝对定位无图像的角落
【发布时间】：2010-02-22 22:58:59
【问题描述】：

我正在寻找一种方法来绝对定位以下 css 样式中使用的四个角。我尝试了以下方法，但那不是正确的。

.rbottom{display:block; background:#f57f20; position:absolute; top:500px;}

这是原始css：

.container5 {background:#666666; color:#fff; margin:0 15px;}

.rbottom{display:block; background:#f57f20;}
.rtop{display:block; background:#eaeade;}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden; background:#666666;}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

.rl1 {margin: 0 0 0 5px; }
.rl2 {margin: 0 0 0 3px; }
.rl3 {margin: 0 0 0 2px; }
.rl4 {margin: 0 0 0 1px; height: 2px;}

.rr1 {margin: 0 5px 0 0; }
.rr2 {margin: 0 3px 0 0; }
.rr3 {margin: 0 2px 0 0; }
.rr4 {margin: 0 1px 0 0; height: 2px;}

【问题讨论】：

标签： css rounded-corners

【解决方案1】：

您的要求并不完全清楚。在 CSS 中绝对定位的方法是使用 position: absolute 属性，然后指定该元素应该定位的位置，例如：

.foo {
    position: absolute;
    top: 0px;
    left: 100px;
}

另一方面，听起来您正在尝试实现 CSS 圆角。如果您不介意 IE 中的角是正方形（不是圆角），您可以使用浏览器特定的 CSS3 圆角属性：

.bar {
    border: 1px solid #000000;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

这应该适用于 Firefox、Safari 和 Google Chrome，但不适用于任何版本的 IE。

【讨论】：

可能还想添加非专有的border-radius，以防 Opera 或 IE 决定在未来支持它（Chrome 已经支持，但没有别的 AFAIK）。
好点。对 CSS 的跨浏览器支持真是令人遗憾……

【解决方案2】：

假设.container5 是所有角落的包装，您是否尝试将position: relative; 添加到其中？

【讨论】：