边界半径不起作用

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

这不起作用,但如果我改为以下,我会得到每个角落:

#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-radiusvs. -moz-border-radius-topleft).