右上圆角问题

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>它包装你pageHeaderWrapper和pageBodyWrapper，然后把一个border-radius在该分区而不是指定的border-radius为2个不同的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尽可能地多。

Answer 3

您的div header-slideshow和.squarespace-slideshow-wrapper都是980像素宽，但您的页面只有960像素，因此您没有看到右上角的圆角。

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