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의 내부에 들어가 싶어하지만 그들은 사업부 앞에 가서 둥근 모서리를 모호. 각각 span에 둥근 모서리를 넣으면 이 div 인 경우에도 각 span의 희미한 윤곽을 볼 수 있습니다.

Answer 1

오버플로 시도 : div에 숨김? 또는 @ AlexC의 대답에 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- 인덱스 제공 :

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

here 참조 , bcoz 범위는 기본값 인 display:inline입니다. 는 http://www.cssstylekit.com/CSS-Border-Radius.html