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上？或者给它一个1000的z指数

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>

请参阅here

Answer 3

如果您为div添加填充，则会从div的边框推送内容，以便它们永远不会重叠。无论如何，这通常看起来更好。

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

Answer 4

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

Click here

Answer 5

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

因此您需要更改display:block或display:inline

所有信用都归于： http://www.cssstylekit.com/CSS-Border-Radius.html

Answer 6

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

CSS border-radius

6 个答案: