圆角 - 优文库

我使用的CSS内容边界圆润用于Firefox的角落，我有以下问题与内容的界限：圆角

代码

<html> 
<head> 
    <style> 
     #outter { 
      width: 200px; 
      margin: auto; 
      text-align: center; 
      border: 1px solid #333; 
      -moz-border-radius: 15px; 
     } 
     #inner { 
      background: red; 
      opacity: 0.5; 
     } 
    </style> 
</head> 
<body> 
<div id="outter"> 
    <div id="inner">text</div> 
</div> 
</body> 
</html>

影响

alt text http://img256.imageshack.us/img256/2108/testew.png

我可以通过定义01来避免这个问题为每个外出的孩子。有什么其他方式我失踪？

编辑

与不同background-color多个内部的div较硬的测试每一个：

<div id="outter"> 
    <div id="inner1" style="background: blue">text</div> 
    <div id="inner2" style="background: gray">text</div> 
    ... 
    <div id="innerN" style="background: yellow">text</div> 
</div>

来源

2010-04-12 Rui Carneiro

你也可以这样做：

#outter { 
     width: 200px; 
     margin: auto; 
     text-align: center; 
     border: 1px solid #333; 
     -moz-border-radius: 15px; 
     background: red; 
    } 
    #inner { 
     opacity: 0.5; 
    }

移动背景到圆形的父母将正确呈现，请参阅这里的例子E：http://jsfiddle.net/mE8En/（只适用于Firefox！），如果你想支持其他webkit based browsers为好，这样增加了WebKit的边界半径：

-moz-border-radius: 15px; 
-webkit-border-radius: 15px;

为编辑更新：为了处理在Firefox在内的div减去在内部DIV像素以补偿边界，造成这样的：

#outter { 
    width: 200px; 
    margin: auto; 
    text-align: center; 
    border: 1px solid #333; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    background: red; 
} 
#outter > div:first-child { 
    -moz-border-radius-topleft: 14px; 
    -moz-border-radius-topright: 14px; 
    -webkit-border-top-left-radius: 14px; 
    -webkit-border-top-right-radius: 14px; 
} 
#outter > div:last-child { 
    -moz-border-radius-bottomleft: 14px; 
    -moz-border-radius-bottomright: 14px; 
    -webkit-border-bottom-left-radius: 14px; 
    -webkit-border-bottom-right-radius: 14px; 
} 
#inner { 
    opacity: 0.5; 
}

注：半径不完美在WebKit的内部div的，根据需要调整......这是因为渲染ISN” t像素完美的浏览器之间。

来源

2010-04-12 11:16:09

所以，**用边框**定义元素的背景。（其他浏览器指的是基于webkit的。：P） – ANeves 2010-04-12 11:23:07

你的解决方案显然适用于这个简单的例子。那么多个内部divs呢？ – 2010-04-12 11:41:12

对于多个内部div，只需将id更改为一个类，然后复制粘贴您的html :) – Kyle 2010-04-12 11:46:06

此外，如果你想要在IE中没有图像的圆角，请查看DDRoundies。

来源

2010-04-12 11:22:10 Kyle

圆角

回答

相关问题