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

Question

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

问题是在这张图片上看到的（对不起一些黑框，那只是为了隐藏一些内容，只有顶部的图像才是问题）

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

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

这是代码

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

Answer 1

Try giving "header" the same border radius at the top as your wrapper element has and adding overflow:hidden. I think that may work.

#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;
}

As an aside your use of absolute positioning for your site is not needed.

To center your site just give your #wrapper element "margin:0 auto;"

All of your orther elements are using absolurte positiong as well. Just let them flow one after another and use floats - don't use absolute positioning to achieve layout like this.

Answer 2

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

此属性有三个可用值：

边框框、内容框或填充框

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

#header {background-clipping:content-box}

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

Answer 3

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

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

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