1 Тема від Overhand

  • Overhand
  • Overhand
  • Новий користувач
  • Поза форумом
  • Дата реєстрації: 30.03.2020
  • Повідомлень: 27
    • Репутація: 3

Тема: border-radius для box-shadow

Усім привіт питання для CSS гуру)

У нас є квадрат width: 100px height: 100px дальше добавляємо box-shadow: black 50px -50px 0px 0px, green 100px -100px 0px 0px;

Питання чи є можливість для тіні застосувати border-radius? Щоб тінь була різних форм? Якщо є можливість то як це зробити?

2 Відповідь від PeSePol

  • PeSePol
  • Користувач
  • Поза форумом
  • Звідки: м. Херсон
  • Дата реєстрації: 06.05.2022
  • Повідомлень: 212
    • Репутація: 56

Re: border-radius для box-shadow

зайдіть на цей сайт та https://css.in.ua/css/property/border-radius та почитайте

3 Відповідь від Overhand

  • Overhand
  • Overhand
  • Новий користувач
  • Поза форумом
  • Дата реєстрації: 30.03.2020
  • Повідомлень: 27
    • Репутація: 3

Re: border-radius для box-shadow

PeSePol написав:

зайдіть на цей сайт та https://css.in.ua/css/property/border-radius та почитайте

На сайті немає відповіді на моє запитання...

Зараз попробую по іншому сформувати запитання:

Є дів ширина висота по 100px
Є box-shadow: black 10px 0 0 0, white 100px 0 0 0;
Питання чи можливо якимось чином перше і друге значення box-shadow розбити по іменам типу:

first(black 10px 0 0 0), second(white 100px 0 0 0);

А дальше зробити так

first - border-top-left-radius: 50%;
second - border-top-left-radius: 60%;

Типу мені потрібно розмножити тінь на 100шт і щоб була можливість кожній тіні задати унікальні значення border-radius без створення 100 дівів і 100 класів, звичайно то можна і через якусь мову програмування зробити з циклом і массивом де будуть усі значення, але я хочу дізнатися чи є можливість давати імена кожній групі значень в box-shadow щоб потім їм надавати довільні параметри

4 Відповідь від PeSePol

  • PeSePol
  • Користувач
  • Поза форумом
  • Звідки: м. Херсон
  • Дата реєстрації: 06.05.2022
  • Повідомлень: 212
    • Репутація: 56

Re: border-radius для box-shadow

так дадайте в CSS

.black_box {
  параметри;
}
.green_box {
  параметри;
}
.black_box {
  параметри;
}
.siro_buro_poshkaryabanij_box {
  параметри;
}

5 Відповідь від leofun01

  • leofun01
  • leofun01
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 15.03.2014
  • Повідомлень: 3 280
    • Репутація: 2722

Re: border-radius для box-shadow

В CSS3 для box-shadow border не існує.

Можна симулювати border для N тінів користуючи N*2 елементів списку box-shadow.

:root {
    --back: #204;
    --border-width: 5px;
}
* {
    box-sizing: border-box;
}
body {
    background-color: var(--back);
}
.target {
    background-color: var(--back);
    display: block;
    width: 100px;
    height: 100px;
    margin: 50px;
    border: 5px solid blue;
    box-shadow:
        var(--back) 20px -20px 0 calc(var(--border-width) * -1),
        yellow 20px -20px 0 0,
        var(--back) 40px -40px 0 calc(var(--border-width) * -1),
        magenta 40px -40px 0 0;
}

Якщо тіні.кількість в [0..2], то можна прикрутити ::before, ::after.

:root {
    --back: #204;
    --border-width: 5px;
}
* {
    box-sizing: border-box;
    position: relative;
}
body {
    background-color: var(--back);
}
.target {
    background-color: var(--back);
    display: block;
    width: 100px;
    height: 100px;
    margin: 50px;
    border: 5px solid blue;
}
.target::before,
.target::after {
    content: "";
    position: absolute;
    z-index: -1;
    background-color: var(--back);
    width: 100%;
    height: 100%;
    margin: calc(var(--border-width) * -1);
    border: var(--border-width) solid yellow;
    transform: translate(20px, -20px);
}
.target::before {
    border-color: magenta;
    transform: translate(40px, -40px);
}
Подякували: Overhand1

leofun01 вебсайт

6 Відповідь від Overhand

  • Overhand
  • Overhand
  • Новий користувач
  • Поза форумом
  • Дата реєстрації: 30.03.2020
  • Повідомлень: 27
    • Репутація: 3

Re: border-radius для box-shadow

Це іммено те що я шукав, але ніяк не міг знайти, брак знань в CSS дає знатись) дуже вдячний за інформацію