CSS邊界半徑

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的模糊輪廓，即使它們與div具有相同的background-color。

Answer 1

嘗試溢出：隱藏在div上？或給它的1000

Answer 2

如果你給div一個填充，你會從div的邊界推入內容，所以它們不會重疊。無論如何，這通常看起來更好。

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

Answer 3

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

Click here

Answer 4

替代的z-index爲@ 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 5

不能添加添加邊框半徑跨度，bcoz span默認爲display:inline。

所以，你需要改變display:block或display:inline

都歸功於： http://www.cssstylekit.com/CSS-Border-Radius.html