Двойные границы в CSS

Question

Я создаю PHP, фотогалерею на основе Javascript с нуля

Проблема в том, что я хочу сделать различие между простой картинкой и фотоальбомом.

Так выглядят простые рамки изображения

Возможно ли создать Facebook как границы фотоальбома (двойные границы, создающие эффект нескольких изображений) с помощью CSS или CSS3?

P.S Не знаю, будет ли это возможно со старыми стандартами CSS. Я имею в виду, что CSS3, вероятно, может это сделать, но он не будет обратно совместимым. С другой стороны, в настоящее время моя сторона php генерирует большие пальцы размером 100x100 px. Мне нужно что-то, что не будет разрушено, если я увеличу размер больших пальцев.

Спасибо заранее

Answer 1

Используйте псевдоэлемент, такой как :before или :after, например: Оказывается, большинству браузеров не нравится: раньше для изображений , потому что это не текстовый элемент. Вы могли бы сделать это, если бы вы делали это на альтернативном элементе, таком как div, и устанавливали фон div на исходное изображение. Или вы можете попробовать: http://jsbin.com/otivaj/edit#html,live

Answer 2

Это то, что вы ищете?

jsfiddle

HTML:

<div class="facebook-album"></div>

CSS:

.facebook-album, .facebook-album:before
{
    background: red;
    width: 100px;
    height: 100px;
    margin: 20px;
    border: 3px solid #FFF;
    box-shadow: 0 0 0 1px #999;
    position: relative;
}
.facebook-album:before
{
    margin: 0;
    content: "";
    position: absolute;
    top: -7px;
    left: -7px;
    background: white;
    z-index: -1;
}

Answer 3

Да, вы можете сделать это с помощью CSS.Похоже, что все ваши изображения одинакового размера, что сделает это очень просто.Просто поместите ваш <img> внутри содержащего элемента с position: relative; и смещением.Контейнер и изображение должны иметь рамку с отступами и смещениями, которые вы так желаете.Установите ширину и высоту содержащего элемента на основе размеров дочернего изображения.

Здесь приведено DEMO для jsfiddle

Answer 4

Вы можете просто посмотреть на источник в Facebook, чтобы понять это.Это также будет работать:

http://jsfiddle.net/g9A6a/

Answer 5

Я не уверен, что вы можете достичь этого эффекта просто с помощью CSS2. Если добавление дополнительной разметки является опцией, я бы сделал что-то вроде этого:

<ul>
<li><img></li>
</ul>

li {
    position: relative; 
    border: 1px solid gray;
}
img {
    padding: 6px;
    border: 1px solid gray;
    position:absolute;
    top:6px;
    left: 6px;
    background-color:white;
}