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

我喜欢使用速记的几个原因：

PIE.htc（css3pie.com）
每个角落的语法都是残暴的，并且每个前缀都有所不同（例如border-top-left-radius与-moz-border-radius-topleft）。

边界半径不起作用

1 个答案: