小编AAr*_*n B的帖子

我在父包装器中有三个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{ …