图像重叠边框，不确定我是否正确执行

Question

我刚开始做HTML / CSS，所以如果我在代码中犯了很多错误，请纠正我。

问题就像在这张照片上看到的那样（对于一些黑匣子感到抱歉，这只是为了隐藏一些内容，只是顶部的图像是问题所在）

http://i.imgur.com/XlaCi.png

您可以看到图片与边框重叠。所以我想知道是否有办法用CSS修复它，或者我是否必须编辑图片以使其适合我的边角？

Here is the code

我在整个互联网上做了一些研究，我可能有一个想法，这与我的绝对位置或/或相对位置有关？但我完全不确定，所以我希望你们可以帮助我

Answer 1

尝试给出＃34;标题＆＃34;你的包装元素顶部的边框半径相同，并添加overflow：hidden。我认为这可行。

#header {
 -webkit-border-top-left-radius: 50px;
 -webkit-border-top-right-radius: 50px;
 -moz-border-radius-topleft: 50px;
 -moz-border-radius-topright: 50px;
 border-top-left-radius: 50px;
 border-top-right-radius: 50px;
overflow:hidden;
}

另外，您不需要为您的网站使用绝对定位。

要使您的网站居中，只需提供#wrapper元素＆＃34;保证金：0自动;＆＃34;

您的所有其他元素也使用absolurte positiong。让它们一个接一个地流动并使用花车 - 不要使用绝对定位来实现这样的布局。

Answer 2

这看起来有点像家庭作业，所以我不会写代码。

但是，您确实有一些选项来围绕图像的角落。 我会按顺序列出它们：

• 将图片设置为标题的background-image。
• 将图像的样式设置为圆角。
• （不要这样做）创建一个已经圆角的透明图像。

Answer 3

如果你使用的是“border-radius” - 这是一个css3属性，那么你也可以使用“ background-clip ”来有效地设置背景剪辑。

此属性有三个可用值：

border-box，content-box或padding-box

我认为你会找到你想要使用的内容框（如下所示）。

#header {background-clipping:content-box}

css tricks上有一篇很棒的文章看一看。值得一个书签，它是一个很好的信息来源，以帮助增长你的CSS / HTML知识。