Рамка-обводка для картинок каталога

как сделано в Тильде

  • Добавляем на страницу блок T123, из раздела "другое".
  • Устанавливаем следующий код для тех блоков, которые используются на странице, чтобы отобразить товары из каталога интернет-магазина.
<!-- Для блока ST300 -->

<style>
.t754__bgimg.t754__bgimg_second.t-bgimg.loaded {
    border: 3px solid #000000;
}
.t754__bgimg.t-bgimg.js-product-img.loaded {
    border: 3px solid #000000;
}
</style>
<!-- Для блока ST305N -->

<style>
.t776__bgimg.t-bgimg.js-product-img.loaded {
    border: 3px solid #000000;
}
</style>
<!-- Для блока ST310N -->

<style>
.t778__bgimg.t-bgimg.js-product-img.loaded {
    border: 3px solid #000000;
}
</style>
<!-- Для блока ST315N -->

<style>
.t786__bgimg.t-bgimg.js-product-img.loaded {
    border: 3px solid #000000;
}
.t786__bgimg.t786__bgimg_second.t-bgimg.loaded {
    border: 3px solid #000000;
}
</style>
<!-- Для блока ST320N -->

<style>
.js-product-img.t-store__card__bgimg.t-bgimg.loaded {
    border: 3px solid #000000;
}
.t-store__card__bgimg_second.t-bgimg.loaded {
    border: 3px solid #000000;
}
</style>
Синтаксис

border: 3px (толщина линии обводки) solid #000000 (цвет линии обводки);

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

Пример: #rec279705848 .js-product-img.t-store__card__bgimg.t-bgimg.loaded

Если вы хотите скруглить края обводки, добавьте в код параметр
order-radius: 250px;
Меняя значение пикселей можно добиться разного овала скругления.

Так же можно задать тень вокруг обводки при помощи параметра
box-shadow: 0 0 7px #666;
Соответственно, меняя значение пикселей и код цвета, можно получить разные тени.

Пример обводки на карточках каталога с скругленными краями и тенью, вы можете посмотреть ниже.
More products
Made on
Tilda