由内部div隐藏的边框半径

我有一个div作为内容框，并在标题内部有另一个div。外部div具有border-radius设置，但内部div隐藏它。由内部div隐藏的边框半径

HTML：

<div id='box'> 
    <div id='boxTitle'> 
     This is the title 
    </div> 
</div>

CSS：

#box { 
    height: 250px; 
    width: 250px; 
    border-radius: 10px; 
    background: #bbb; 
} 
#boxTitle { 
    width: 100%; 
    background: #000; 
    color: #fff; 
    text-align: center; 
}

的jsfiddle：http://jsfiddle.net/AAUbA/

如何解决它，所以我可以的顶部看到圆角外？

来源

2014-02-20 Wildcard27

您可以将border-top-left和border-top-right放在'＃boxTitle'上。 – Vucko

您 #box元素

使用overflow: hidden：

#box { 
    height: 250px; 
    width: 250px; 
    border-radius: 10px; 
    background: #bbb; 
    overflow: hidden 
}

请参阅更新的小提琴这里：http://jsfiddle.net/AAUbA/2/

顺便说一句：这是值得考虑增加在供应商的前缀，以确保更好的跨浏览器的兼容性。

This是关于如何使用该属性的好消息。您可以使用this tool来自动生成您需要的CSS。

来源

2014-02-20 09:59:35 johnkavanagh

完美！我赞赏x-browser支持的链接:) – Wildcard27

作为旁注：现在[你可以放弃厂商前缀]（https://developer.mozilla.org/en-US/docs/Web/ CSS/border-radius＃Browser_compatibility）为'border-radius'属性。 –

很高兴能有帮助！随时在完成后标记正确的答案（它可以帮助未来的访问者找到答案），并且如果您需要进一步的帮助，可随时提出进一步的问题。 – johnkavanagh

添加overflow：隐藏在您的#box元素上。

来源

2014-02-20 10:03:02

给#boxTitle在盒子的两个顶角上的半径相同。如已经建议的，您也可以将溢出设置为隐藏overflow:hidden;。这两个工作，但如果你想添加的#box之外的东西也不会被显示出来，与此代码会显示：

HTML：

<div id='box'> 
    <div id='boxTitle'> 
     This is the title 
    </div> 
</div>

CSS：

#box { 
    height: 250px; 
    width: 250px; 
    border-radius: 10px; 
    background: #bbb; 
} 

#boxTitle { 
    width: 100%; 
    background: #000; 
    color: #fff; 
    text-align: center; 
    border-top-right-radius:10px; 
    border-top-left-radius:10px; 
}

JSFiddle demo

来源

2014-02-20 10:05:16

我想过这个，但认为它会有点凌乱 – Wildcard27

@ matt1985为什么会“有点混乱”？ – Vucko

它不会是凌乱的，因为我写道：使用'overflow：hidden;'是更加混乱的，因为如果你想在盒子外面看到东西，它将不会被显示。因此，我宁愿不使用'overflow：hidden;'因为这不是必需的。 –

由内部div隐藏的边框半径

回答

相关问题