0

我试图在 250x250 的图像周围放置一个漂亮的边框，只使用 html 和 css。标记是这样的：

<div id="img-container"><img src="pic.jpg" border="0"/></div>

而CSS是：

#img-container {
    height: 225px;
    width: 225px;
    padding: 3px;
    border: 1px solid black;
    z-index: 10;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

#img-container img {
    z-index: 5;
}

基本上，我希望 div 容器剪辑超出其边界的图片边缘。这将使用border-radius 属性（-moz-border-radius、-webkit-border-radius 等）实现圆角边缘效果——如果它确实有效或什至可以完成的话。寻找这方面的提示和技巧。谢谢。

而且，是的，我显然不是网页设计师 :)

4

2 回答 2

2

是的，这是可能的，但您应该使用 CSS 将图像设置为 div 背景：

#img-container {
    height: 225px;
    width: 225px;
    padding: 3px;
    border: 1px solid black;
    background-image: url('pic.jpg');
    border-radius: 10px;
}

这是必要的，否则图像周围会出现可怕的白色边框（在 Google Chrome 中测试）。

于 2010-03-16T08:23:18.130 回答
1

据我了解你的问题，删除

#img-container img {
    z-index: 5;
}

部分应该可以解决问题。

或者您可以将图像用作背景图像：

#img-container {
    ...
    background: url(pic.jpg) no-repeat top left;
}
于 2010-03-16T08:21:35.530 回答