是否可以用html实现图像剪切/遮罩效果+ CSS3？

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

这是必要的，否则您将在图像周围看到可怕的白色边框（在 Google Chrome 中测试）。

Answer 2

据我理解你的问题，删除该

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

部分应该可以解决问题。

或者您可以使用该图像作为背景图像：

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