Question

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

<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等）实现圆角效果 - 如果它实际上有效或甚至可以完成。寻找关于此的提示和技巧。感谢。

而且，是的，我显然不是网页设计师。）

Answer 1

是的，但是你应该使用CSS将图像设置为div背景：

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

这是必要的，否则你会在图像周围出现可怕的白色边框（在谷歌浏览器中测试过）。

Answer 2

据我了解你的问题，删除

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

部分应该可以解决问题。

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

#img-container {
    ...
    background: url(pic.jpg) no-repeat top left;
}

使用html + css3可以实现图像剪切/屏蔽效果吗？

2 个答案: