CSS-Rahmen-Radius

Question

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

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

Ich möchte, dass jeder span die in den div mit abgerundeten Ecken, aber sie gehen vor das Div und verdecken die abgerundeten Ecken. Wenn ich abgerundete Ecken an jedem span dann können Sie einen schwachen Umriss der einzelnen span auch wenn sie dieselbe background-color als die div .

Answer 1

Versuchen Sie overflow:hidden für das div? oder geben Sie ihm einen z-index von 1000

Answer 2

Alternative zur Antwort von @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>

siehe aquí

Answer 3

Wenn Sie den div a padding werden Sie den Inhalt von den Rändern des div schieben, so dass sie sich nicht überschneiden werden. Das sieht in der Regel sowieso schöner aus.

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

Answer 4

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

Klicken Sie hier

Answer 5

Sie können keinen Randradius für span hinzufügen, da span der Standard ist. display:inline in der Art.

Sie müssen also Folgendes ändern display:block o display:inline

Alle Anerkennung geht an: http://www.cssstylekit.com/CSS-Border-Radius.html