右上角的圆角问题

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 header-slideshow和.squarespace-slideshow-wrapper都是980px宽，但您的页面只有960px，因此您看不到右上角的圆角。

在两个div上将宽度设置为960px，你会没事的。

Answer 3

您应该使用新的<div>包裹您的pageHeaderWrapper和pageBodyWrapper，然后在该div上添加border-radius，而不是为{2}指定border-radius divs，并指定哪些角应该有border-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。