Как доработать рамку для картинки?

[borus]

Здравствуйте.

Сделал набросок того, что хочу получить здесь

Хочу совершенствовать его в следующем:

1. управлять типом внутренней и внешней черной рамки отдельно.

2. регулировать расстояние между черными рамками. так чтобы внешний радиус скругления равнялся внутреннему плюс ширина белого пространства между черными рамками.

3. чтобы изображение обрезалось первой рамкой (сейчас его углы отдельно скругляются)

[ablay2009]

1. управлять типом внутренней и внешней черной рамки отдельно.

2. регулировать расстояние между черными рамками. так чтобы внешний радиус скругления равнялся внутреннему плюс ширина белого пространства между черными рамками.

3. чтобы изображение обрезалось первой рамкой (сейчас его углы отдельно скругляются)

Здравствуйте,

можно попробовать так, если доп.разметка не критична - http://jsfiddle.net/ablay/rZJjW/14/

Чтобы не задавать радиус картинки, нужно поставить ее фоном к блоку (еще, картинка скругляется далеко не во всех браузерах, если ей задать border-radius)

[borus]

Благодарю.

На самом деле я хотел сделать так

Единственно, ширина белого поля снизу почему-то больше чем по другим сторонам, хотя padding указал один и тот же.

Убрал display:inline-block у первого вложенного div (класс div1), и всё стало равноширинным.

inline-block даёт доп. margin снизу?

Edited February 6, 2012 by borus

[ablay2009]

Убрал display:inline-block у первого вложенного div и всё стало равноширинным.

inline-block даёт доп. margin снизу?

Да он дает снизу маргин, хотя его и не видать. Странное поведение.

[borus]

Да он дает снизу маргин, хотя его и не видать. Странное поведение.

последний вопрос: почему если убрать свойство display:block у тега img рамка блока с классом div1 обхватывает изображение с зазором снизу? По той же причине, что inline тег имеет margin снизу?

[ablay2009]

Дело в том, что img - строчный элемент, а у строчных элементов vertical-align по умолчанию имеет значение baseline. Нужно добавить vertical-align:bottom к картинке, и отступ исчезнет

[borus]

Дело в том, что img - строчный элемент, а у строчных элементов vertical-align по умолчанию имеет значение baseline. Нужно добавить vertical-align:bottom к картинке, и отступ исчезнет

надо уяснить до конца

из справочника:

baseline

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

то есть по умолчанию базовая линия картинки(как понимаю это верхний край картинки) совпадает с базовой(верхней) линией родителя - блока div (раз сверху нет зазора)?

Из справочника:

bottom

Выравнивает основание текущего элемента по нижней части элемента строки, расположенного ниже всех.

То есть здесь уже речь не о базовых линиях, а о нижних краях элементов?

[borus]

Столкнулся с тем, что реальная структура html, которую надо причёсывать другая.

Не знаю как теперь сделать внутреннюю чёрную рамку моноширинной в углах скругления.

Просьба помочь.

Благодарю.

[ablay2009]

Столкнулся с тем, что реальная структура html, которую надо причёсывать другая.

Не знаю как теперь сделать внутреннюю чёрную рамку моноширинной в углах скругления.

Просьба помочь.

Благодарю.

Снова здравствуйте, у меня jsfiddle.net не открывается почему-то(днем же открывался). Не могли бы вы заскринить, то что требуется. И код выложить сюда.

Edited February 6, 2012 by ablay2009

[borus]

Снова здравствуйте, у меня jsfiddle.net не открывается почему-то(днем же открывался). Не могли бы вы заскринить, то что требуется. И код выложить сюда.

Выкладываю принтскрин структуры с jsfiddle, красным кругом отметил то, что надо исправить:

[bob_24]

вот тут хороший способ описан делать круглые/скругленные картинки

[ablay2009]

Метод, который предложил bob_24 вам не подходит, т.к. у вас должны быть двойные рамки еще. Его удобно использовать когда картинку нужно тупо закруглить (я у себя на сайте, к примеру, использую этот метод для закругления аватарок в комментариях). А так, я не понял в чем проблема? Вы имеете ввиду то, что картинка квадратная все таки? Если да, то не парьтесь и сделайте картинку фоном

Edited February 6, 2012 by ablay2009

[borus]

Вроде сделал, чтобы чёрная рамка вокруг скругленного фото была одинаковой ширины. Вот

Насколько это кросбраузерно относительно последних версий браузеров?

Edited February 6, 2012 by borus

[borus]

Ещё не всё, как оказалось.

Потребовалось добавить ссылки-слова под картинками. В результате общая рамка с тенью обхватила и картинку и текстовую ссылку, добавив последней ещё и черную рамку.

Моих знаний не достаточно. Прошу помочь здесь

Т.е. вопрос как при такой структуре оставить тень с черной рамкой только вокруг фото?

Edited February 7, 2012 by borus

[ablay2009]

Ещё не всё, как оказалось.

Потребовалось добавить ссылки-слова под картинками. В результате общая рамка с тенью обхватила и картинку и текстовую ссылку, добавив последней ещё и черную рамку.

Моих знаний не достаточно. Прошу помочь здесь

Т.е. вопрос как при такой структуре оставить тень с черной рамкой только вокруг фото?

Чтобы ссылка была под рамкой с тенью достаточно создать новую ячейку под картинкой. А надпись у вас обводится потому что вы применяете рамку ко всем ссылкам в блоке, а надо только к той, в которой есть картинка, можно просто задать класс ссылке с картинкой и для него сделать рамку.

[borus]

Эврика!

Благодарю Great Rash

Вот

Edited February 7, 2012 by borus