css - 右上の角丸の問題

Question

スライドショーの最後の右隅を丸くすることができないようです。 http://www.petrowestcorp.com/home/

.squarespace-slideshow-wrapper {
-webkit-border-top-right-radius: 5px!important;  
-moz-border-radius-topright: 5px!important;
border-top-right-radius: 5px!important; 
}

Answer 1

sfセレクターに追加する必要があるようです

.squarespace-slideshow-animated-frame.type-fade .sf
{
    border-top-right-radius:5px
    along with webkit and -moz obviously
}

Answer 2

<div>2 つの異なるdivpageHeaderWrapperを指定しpageBodyWrapperて、どのコーナーに.border-radiusborder-radiusborder-radius

このような：

<div id="content">
  <div id="pageHeaderWrapper">
  </div>
  <div id="pageBodyWrapper">
  </div>
</div>

CSS:

#content {
  -webkit-border-radius: 5px;  
  -moz-border-radius: 5px;
  border-radius: 5px; 
}

これにより、構造がすっきりし、コード行が少なくなります。

ヒント:!importantできるだけ使用しないようにしてください。