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

Question

我刚开始做 HTML/CSS，所以如果我在我的代码中犯了任何重大错误，请纠正我。

问题如上图所示（抱歉，有些黑框只是为了隐藏一些内容，只是顶部的图像有问题）

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

您可以看到图片与边框重叠。所以我想知道是否有任何方法可以用 CSS 解决这个问题，还是我必须编辑图片以使其适合我的边框角？

Here is the code

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

Answer 1

尝试在顶部为“标题”提供与包装元素相同的边框半径，并添加溢出：隐藏。我认为这可能有效。

#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 元素“margin:0 auto;”

您的所有其他元素也都使用绝对位置g。让它们一个接一个地流动，使用浮动——不要使用绝对定位来实现这样的布局。

Answer 2

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

此属性有三个可用值：

边框框、内容框或填充框

我想你会找到你想要使用的content-box（如下）。

#header {background-clipping:content-box}

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

Answer 3

这看起来有点功课，所以我不会写代码。

但是，您确实有几个选项可以使图像的角变圆。 我将按照方便的顺序列出它们：

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