4

我在父包装器中有三个 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;
}
4

1 回答 1

7

我将建议使用简写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）。
于 2012-07-18T15:29:35.333 回答