эффект границы css

#css #image #border

#css #изображение #граница

Вопрос:

Мне интересно, возможно ли достичь этого эффекта только с помощью css. Как вы, наверное, заметили, изображение имеет 4 границы, если вы немного увеличите масштаб (без этой нижней тени я не хочу это использовать).

изображение http://img265.imageshack.us/img265/192/version203.jpg

Ответ №1:

Похоже, что самая внешняя граница уже выполнена с использованием CSS с простым эффектом границы. Самой внешней границей будет прямоугольник с рамкой и некоторым заполнением, чтобы поместить изображение внутрь. Затем, перейдя к серому прямоугольнику, вы могли бы использовать другое поле с border: 3px double , поскольку цвет границы совпадает с цветом фона, и добавить background-clip: padding-box , чтобы фон не закрывал белую линию между двойными рамками. Также кажется, что на этом поле будет радиус границы около 3 пикселей и некоторое отступление, пока вы не дойдете до фактического изображения, которое просто имеет белую рамку вокруг него.

Простой пример CSS:

 span.imgbox {
    background: #CCC;
    background-clip: padding-box;
    border: 3px double #CCC;
    border-radius: 3px;
    display: inline-block;
    padding: 10px;
}
span.imgbox > img {
    border: 1px solid #FFF;
}

Обычно это то, что будет задействовано, предполагая, что вам не нужен белый прямоугольник с черной рамкой, как показано в реальном представлении веб-сайта, а только те границы, которые вы хотите отобразить на самом изображении.

1. @Alecs: Я не верю, что CSS может создать подобную странную тень, по крайней мере, из всех примеров, которые я когда-либо видел с тенями и свечением.

2. О, довольно плохо, мне интересно, как я могу добавить этот эффект, потому что, если я использую его в качестве фонового изображения, я думаю, это не сработает, потому что ширина изображений устанавливается пользователем из серверной части, поэтому мне нужно, чтобы этот эффект соответствовал любой ширине изображения…

Ответ №2:

С помощью box-shadow вы можете эмулировать несколько границ. Это именно то, что вы ищете:

http://weston.ruter.net/2009/06/15/multiple-borders-via-css-box-shadow/

1. Ему все равно понадобились бы два элемента, потому что border-radius это применялось бы ко всем теням прямоугольника, когда в этом примере требуется закругление только одной из границ.

Ответ №3:

вы могли бы смешать цвет тени, контура, границы и отступа / фона… но это не было бы кроссбраузерным..

 border: 4px solid #000;
outline: 4px solid #f00;
background-color: #ff0;
padding: 10px;
box-shadow: 0px 0px 0px 4px #333;

ДЕМОНСТРАЦИЯ

Я думаю, что единственный способ — это иметь вложенные элементы.