4

親ラッパーに 3 つの 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 に答える