邊界半徑不工作

Question

我有三個div在父包裝中。當我申請border-radius：20px;在父母上我得到圓形的邊框。但是當我對子div應用特定的圓角四捨五入時，沒有任何反應見下文。

我的HTML：

<nav id="sliderNav"> 
<div id="sliderDiv"> 
     <ul id="slider"> 
       <li><img src="bookaparty.jpg" width="290" height="417" /></li> 
       <li><img src="bottledeals.jpg" width="290" height="417" /></li> 
      </ul> 
     </div> 
     <div id="slider3Div"> 
     <ul id="slider3"> 
       <li><img src="bookaparty.jpg" width="290" height="417" /></li> 
       <li><img src="bottledeals.jpg" width="290" height="417" /></li> 
      </ul> 
     </div> 
     <div id="slider2Div"> 
     <ul id="slider2"> 
       <li><img src="bookaparty.jpg" width="290" height="417" /></li> 
       <li><img src="bottledeals.jpg" width="290" height="417" /></li> 
      </ul> 
</div> 
</nav> 

我的CSS：

#sliderNav{ 
display:block; 
text-align:center; 
font-size:0; 
} 

#sliderDiv{ 
border-top-left-radius:20px; 
border-bottom-left-radius:20px; 
} 
#slider2Div{ 
border-top-right-radius:20px; 
border-bottom-right-radius:20px; 
} 
#slider3Div{ 
border-top-left-radius:20px; 
border-top-right-radius:20px; 
} 
#sliderNav div{ 
font-size:18px; 
display:inline-block; 
} 

這並不工作，但如果我更改爲以下我得到everycorner四捨五入：

#sliderNav div{ 
font-size:18px; 
display:inline-block; 
     border-radius:20px; 
} 

Answer 1

我我會推薦使用border-radius（如果使用PIE.htc，將在IE8及更低版本中工作）的簡寫：

注：border-radius簡寫如下：border-radius: top-left top-right bottom-right bottom-left

#sliderDiv{ 
    -webkit-border-radius: 20px 0 0 20px; 
    -moz-border-radius: 20px 0 0 20px; 
    border-radius: 20px 0 0 20px; 
} 
#slider2Div{ 
    -webkit-border-radius: 0 20px 20px 0; 
    -moz-border-radius: 0 20px 20px 0; 
    border-radius: 0 20px 20px 0; 
} 
#slider3Div{ 
    -webkit-border-radius: 20px 20px 0 0; 
    -moz-border-radius: 20px 20px 0 0; 
    border-radius: 20px 20px 0 0; 
} 

幾個原因我喜歡用簡寫：

1. 所需的PIE.htc（css3pie.com）
2. 語法對於每個角落來說，每個前綴都是非常殘酷和不同的（例如， border-top-left-radius與-moz-border-radius-topleft）。