logo标签列表

CSS边框半径

css
4
<style>
  div {border-radius:5px;background:#cccccc;}
  span {display:block;}
</style>

<div>
    <span>First line</span>
    <span>Second line</span>
</div>

我希望每个 span 都能适应圆角的 div 内，但它们会出现在 div 的前面并遮挡圆角部分。如果我给每个 span 加上圆角，则即使它们与 div 具有相同的 background-color，你仍然可以看到每个 span 的浅色轮廓。
你用什么浏览器？在火狐浏览器中运行得很好。 - gabitzish
6个回答
2
@AlexC的回答有一个替代方案:
<style>
  div {border-radius:5px;background:#cccccc;}
  span {padding:0px 5px;display:block;}
  .topspan {padding:5px 5px 0px 5px;display:block;}
  .bottomspan {padding:0px 5px 5px 5px;display:block;}
</style>

<div>
    <span class="topspan"></span>
    <span>First line</span>
    <span>Second line</span>
    <span class="bottomspan"></span>
</div>

请点击这里查看。

2
尝试在div上使用overflow:hidden？或者将其z-index设置为1000。
0
<style>
 .demo-border-radius {
    width: 100px;
    height: 100px;
    border-radius: 30px;
    border: 2px solid #000;
    overflow: hidden;
  }
</style>
<div class="demo-border-radius">border radius div</div>
0

如果你给 div 添加内边距，就可以将内容从 div 的边框处推开，这样它们就不会重叠。通常这样看起来更美观。

div {
    border-radius: 5px;
    background:    #ccc;
    padding:       5px;
}
0
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接