CSS border-radius

Question

<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那么你就可以看到每一个模糊的轮廓span ，即使它们具有相同的background-color为div 。

Answer 1

尝试溢出：隐藏在div上？ 或者给它一个z指数1000

Answer 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>

看到这里

Answer 3

您无法为span添加边框半径，bcoz span是默认display:inline类型。

所以你需要更改display:block或display:inline

所有功劳都归功于： http ： //www.cssstylekit.com/CSS-Border-Radius.html

Answer 4

<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>

Answer 5

如果你给div一个填充，你将从div的边框推送内容，这样它们就永远不会重叠。 无论如何，这通常看起来更好。

div {
    border-radius: 5px;
    background:    #ccc;
    padding:       5px;
}

Answer 6

 span {display:block;padding:0px 10px;} 

点击这里