Можно ли добиться эффекта отсечения / маскировки изображения с помощью 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 и т. Д.) - если это действительно работает или даже может быть выполнено. Нужны советы и хитрости по этому вопросу. Спасибо.

И, да, я, очевидно, не веб-дизайнер :) 1009 *

Answer 1

Да, это возможно, но вы должны установить изображение в качестве фона div, используя CSS:

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