Как сделать border, вокруг дочерних элементов?

CSS JavaScript

1 ответ

Как можно на js или css добиться такого эффекта, интересует зеленый бордер

Дополнительно:

Давайте попробуем добавить скрин еще раз?

Михаил Р., Добавил.

hudiakov, просто нижнему блоку задай отрицательный маджин ( вверх который равен ширине бордер ) и паддинг ( который равен гапу ), ну и верхний бордер у него не отрисовывай

Как вариант filter: drop-shadow(0 0 1px red); для родителя. Возможно, потребуется несколько теней для минимизации размытия.

szQocks, Не понял, можно код, что вы имеете ввиду?

hudiakov, https://codepen.io/kapysta-xxl/pen/qBwRooY

как-то так, но чёт там плохо отображается, но суть я думаю там понятна, если мастабировать, то оно нормально отобразиться, это видимо баг у codepen я хз

hudiakov, кстати Ankhena неплохой вариант посоветовала, немного подкорректировать как-нибудь и нормально выйдет, она всё же на большем опыте чем я, и уже натренировалась там во всю с этим css

я вообще этот filter: drop-shadow, только для картинок применял) даже в голову не приходило для блока применить

hudiakov, там у меня кстати вообще блоки выпали

szQocks, Если можно, сбросте пример кода, что то не понимаю как его использовать.

hudiakov,

&lt;div class="wrapper"&gt;   &lt;div class="block"&gt;     &lt;div class="element"&gt;&lt;/div&gt;     &lt;div class="element"&gt;&lt;/div&gt;     &lt;div class="element"&gt;&lt;/div&gt;     &lt;div class="element"&gt;&lt;/div&gt;     &lt;div class="element"&gt;&lt;/div&gt;   &lt;/div&gt;   &lt;div class="block"&gt;     &lt;div class="element"&gt;&lt;/div&gt;     &lt;div class="element"&gt;&lt;/div&gt;     &lt;div class="element"&gt;&lt;/div&gt;   &lt;/div&gt; &lt;/div&gt;

*{   box-sizing: border-box; }  .wrapper{   margin: 50px auto;   width: min-content;   display: flex;   flex-direction: column;   filter: drop-shadow(0 0  1px red); }  .block{   height: 100px;   display: flex;   width: min-content;   gap: 0 10px;   background: #fff; }  .block:last-child{   padding-top: 10px;   border-top: none; }  .element{   width: 100px;   height: 100%;   border: 1px solid gray; }

*{ box-sizing: border-box; } .wrapper{ margin: 50px auto; width: min-content; display: flex; flex-direction: column; filter: drop-shadow(0 0 1px red); } .block{ height: 100px; display: flex; width: min-content; gap: 0 10px; background: #fff; } .block:last-child{ padding-top: 10px; border-top: none; } .element{ width: 100px; height: 100%; border: 1px solid gray; }

szQocks, Спасибо, это не совсем то что мне нужно, этот вариант подошел если бы если бы верстка была фиксированная, но так на каждом разрешение, будет разное количество подкатегорий в категории.
Например, на десктопе их по 5 в линию, на планшете по 3 и остальные должны перемещаться в. т.е. обертка у них одна.
Походу без js, тут не сделать.

hudiakov, да лучше через js, потому что я думаю что не выйдет через один блок сверстать этот зеленый бордер, либо этот бордер вообще через js отрисовывать, можно кстати у Ankhena спросить, Ankhena - есть у вас мысли по поводу этой задачи ? ( в плане адаптива )

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

hudiakov, в общем удачи в реализации

Ankhena, ???)))

szQocks, не поняла, что я должна сделать?

Ankhena, есть ли мысли у вас, по поводу адаптива к этому блоку, который в вопросе ? ничего делать не надо, ничего вы не должны)

szQocks, тут "должна" было в мягком смысле и без претензий :)

А что с адаптивом? Ну поместится другое количество блоков в строке. Для drop-shadow это не помеха.
Я пока не вижу проблемы.

Ankhena,

Ну поместится другое количество блоков в строке

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

Ankhena, есть ли варианты решения, но с другой структурой, не той которая у меня, попроще ?

например

&lt;div class="wrapper"&gt;   &lt;div class="block"&gt;     &lt;div class="element"&gt;&lt;/div&gt;     &lt;div class="element"&gt;&lt;/div&gt;     &lt;div class="element"&gt;&lt;/div&gt;     &lt;div class="element"&gt;&lt;/div&gt;     &lt;div class="element"&gt;&lt;/div&gt;   &lt;/div&gt;   &lt;div class="block"&gt;     &lt;div class="element"&gt;&lt;/div&gt;     &lt;div class="element"&gt;&lt;/div&gt;     &lt;div class="element"&gt;&lt;/div&gt;   &lt;/div&gt; &lt;/div&gt;

есть ли идеи о том как реализовать этот бордер, если тут не будет например блоков с названием .block а просто будут идти элементы

то есть что бы было вот так

&lt;div class="wrapper"&gt;     &lt;div class="element"&gt;&lt;/div&gt;     &lt;div class="element"&gt;&lt;/div&gt;     &lt;div class="element"&gt;&lt;/div&gt;     &lt;div class="element"&gt;&lt;/div&gt;     &lt;div class="element"&gt;&lt;/div&gt;     &lt;div class="element"&gt;&lt;/div&gt;     &lt;div class="element"&gt;&lt;/div&gt;     &lt;div class="element"&gt;&lt;/div&gt; &lt;/div&gt;

szQocks, да, всё верно, вот так

&lt;div class="wrapper"&gt;     &lt;div class="element"&gt;&lt;/div&gt;     &lt;div class="element"&gt;&lt;/div&gt;     &lt;div class="element"&gt;&lt;/div&gt;     &lt;div class="element"&gt;&lt;/div&gt;     &lt;div class="element"&gt;&lt;/div&gt;     &lt;div class="element"&gt;&lt;/div&gt;     &lt;div class="element"&gt;&lt;/div&gt;     &lt;div class="element"&gt;&lt;/div&gt; &lt;/div&gt; гриды, флексы, что там удобнее и drop-shadow

Покажите, что у вас не получается при таком варианте?

Ankhena, https://codepen.io/Alex-Miranovich/pen/GRLmqgy

hudiakov,

https://codepen.io/Alex-Miranovich/pen/GRLmqgy

Ну логично. Вы задали drop-shadow для wrappera. Внутри него block с непрозрачным фоном. block занимает всю площадь wrapper'а => тень рисуется прямоугольная вокруг непрозрачной зоны.

drop-shadow - обертке элементов, сейчас это block. Просто попадите свойствами в нужный селектор

.block{   display: flex;   flex-flow: row wrap;   filter: drop-shadow(0 0  1px red); }  .element{   width: 25%;   height: 100px;   border: 1px solid gray;    background: #fff; }

.block{ display: flex; flex-flow: row wrap; filter: drop-shadow(0 0 1px red); } .element{ width: 25%; height: 100px; border: 1px solid gray; background: #fff; }

Ankhena, спасибо разобрался, ща попробую написать решение автору готовое

hudiakov, там просто нужно убрать gap, и сетку делать на флексах, с вложенными блоками которые нахоидились бы внутри блоков с классом .element

hudiakov, попробовал я разные решения, это самое более менее простое скорее всего) https://codepen.io/kapysta-xxl/pen/oNOWxrY

szQocks, Спасибо большое.

hudiakov, там конечно есть какой-то отступ непонятный мне, и там надо из нескольких теней сделать одну что бы получилось менее расплывчато, как и посоветовала Ankhena )

hudiakov, а хотя нет, всё норм ну кроме тени

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Андрей PHP Ответ

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

Прежде всего, необходимо убедиться, что у родительского элемента установлено свойство CSS - position: relative;. Это позволит нам корректно позиционировать дочерние элементы относительно родительского.

Затем, для каждого дочернего элемента, которому вы хотите добавить границу, вы можете использовать следующий CSS код:

.child-element {
  border: 1px solid #000; /* 1px - толщина границы, solid - стиль границы (сплошная), #000 - цвет границы (в данном случае черный) */
  padding: 10px; /* Добавляет отступ вокруг содержимого элемента */
  margin: 10px; /* Добавляет внешний отступ вокруг элемента */
}

.child-element { border: 1px solid #000; /* 1px - толщина границы, solid - стиль границы (сплошная), #000 - цвет границы (в данном случае черный) */ padding: 10px; /* Добавляет отступ вокруг содержимого элемента */ margin: 10px; /* Добавляет внешний отступ вокруг элемента */ }

Этот код установит границу толщиной 1 пиксель, сплошного стиля и черного цвета вокруг каждого дочернего элемента с классом .child-element. Вы также можете настроить толщину, стиль и цвет границы по вашему усмотрению.

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

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

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Telegram Как диагностировать ошибку с подключением к прокси в мобильном приложении Telegram? 1 ответ

Как сделать border, вокруг дочерних элементов?

Дополнительно:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно