CSS 圆角不工作 - 为什么不呢？答案

【问题标题】：CSS Rounded Corners Not Working - Why Not?CSS 圆角不工作 - 为什么不呢？
【发布时间】：2010-09-18 02:23:25
【问题描述】：

<div id="main-solutions">
   <div id="main-solutions-top-left"></div>
   <div id="main-solutions-top-right"></div>
   <div id="main-solutions-body">
       blah blah blah
   </div>
</div>

css

#main-solutions {
}

#main-solutions-top-left {
    position: absolute;
    top: 0px;
    left: 0px;
    background: url('../images/Top-Left-Gray-Corner.gif') no-repeat top left;
    width: 434px;
    height: 15px;
}

#main-solutions-top-right {
    position: absolute;
    top: 0;
    right: 0;
    background: url('../images/Top-Right-Gray-Corner.gif') no-repeat top right;
    width: 434px;
    height: 15px;
}

#main-solutions-body {
    background: url('../images/Gray-Gradient.jpg') repeat-x;
}

我希望看到 main-solutions 在我的圆角图像的左上角和右上角有两个绝对定位的 div，然后是带有渐变的主体，但是当我使用 HTML 元素浏览器时，顶部-left 和 top-right div 根本没有出现，很困惑，为什么这些 div 被忽略了？

更新（对于其他对答案感到困惑的人）：

我的问题的根源是我不明白，除了指定元素本身的位置之外，绝对和相对都为其内容定义了一个新的坐标系。在这里找到了一个很好的解释：

http://www.w3.org/TR/WD-positioning-970131#Positioned

来自第 2.2 节

像“绝对”定位元素一样， “相对”定位定义一个新的子元素的坐标系，原点位于第一个子元素的位置被渲染了

【问题讨论】：

标签： html css rounded-corners

【解决方案1】：

据我所见，角应该出现在 页面的左上角和右上角，因为您的容器 div 没有 CSS position 属性。绝对定位元素的位置相对于具有position 而不是static（默认值）的最内层父元素。

尝试将position: relative 添加到容器 div 的 CSS 中。它的工作原理很像默认值，但是（1）如果你愿意，你可以将 div 的位置移动一些（这在这里不是非常有用，但仍然如此），以及（2）因为位置不再是static， div 内绝对定位的东西应该相对于容器定位自身，而不是相对于正文/页面。

另外，有些浏览器甚至不会显示没有内容的 div —— 所以该 div 的背景可能不会显示。您可能希望在 div 中有一些东西。即使是单个&nbsp; 也可以。

【讨论】：

这不是告诉父 div ITS 位置将相对于最后一个元素吗？不是内容？
这个。当你绝对定位一个元素时，它的坐标系是最近的显式定位的父元素的坐标系。
@walnutmon: position relative 告诉它相对于它通常的位置进行定位，所以如果你不设置任何上/左/右/下坐标，它将保持在同一个位置。跨度>
是的，但它不会改变它的位置，并且有位置的元素相对于最近的有位置的父元素进行布局；如果您没有在父 div 上定义位置，那么这些 div 最终相对于链上的元素是绝对的，例如您的文档正文。
这是否意味着在一个层次结构中将任何 div 作为相对位置可能会弄乱其中任何绝对位置的定位？当我为 DIV 说“相对”时，它里面有什么东西，不管嵌套有多深，都将它用作绝对定位的新原点？除非其中的某些东西也定义了相对的。

【解决方案2】：

您是否考虑过使用 CSS 边框半径来实现这一点，而不是乱用图像？

除 IE 之外的所有浏览器都支持border-radius，但即使是 IE 也可以通过一个名为 CSS3Pie 的聪明小东西来使用它。

（另外，CSS3Pie 还提供了 IE CSS 渐变背景，所以你可以一石二鸟）

【讨论】：