是否可以使用 html + css3 实现图像剪辑/遮罩效果？答案

【问题标题】：is it possible to achieve an image clipping/masking effect with html + css3?是否可以使用 html + css3 实现图像剪辑/遮罩效果？
【发布时间】：2011-01-28 00:21:00
【问题描述】：

我正在尝试在 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 等）实现圆角边缘效果——如果它确实有效或什至可以完成的话。寻找这方面的提示和技巧。谢谢。

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

【问题讨论】：

标签： html css image-clipping

【解决方案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 中测试）。

【讨论】：

【解决方案2】：

据我了解你的问题，删除

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

零件应该可以解决问题。

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

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

【讨论】：