是否可以通過html + css3實現圖像裁剪/遮罩效果？

Question

我試圖在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等）實現圓角邊緣效果 - 如果它實際工作或甚至可以完成。尋找關於此的技巧和竅門。謝謝。

而且，是的，我顯然不是一個網頁設計師:)

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