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

您的 divheader-slideshow和.squarespace-slideshow-wrapper980px 宽，但您的页面只有 960px，因此您看不到右上角的圆角。

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

Answer 3

你应该使用一个新<div>的包装你的pageHeaderWrapper然后pageBodyWrapper在border-radius那个 div 上放一个，而不是指定border-radius2 个不同的 div，并指定哪些角应该有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。