Свойство box-shadow: разное значение

@Black_Star · Регистрация: 06.05.2016

Студворк — интернет-сервис помощи студентам

Добрый день уважаемые. Вот возник интерес, есть ли возможность разделить свойство box-shadow: по граням? (Ну или найти альтернативу)
Пример
Допустим у нас есть div(квадрат). как сделать так, что б у него box-shadow: было разным значением на каждой гране ?

@mrtoxas · 09.12.2016, 13:48

Black_Star, нарисуйте как вы это видите.

@Black_Star · 09.12.2016, 19:26 **[ТС]**

Спасибо уже разобрался. box-shadow можна через запятую задать для каждой стороны, точно так же как и text-shadow. К сожалению, очень плохо применяется с svg обектами. Оставляет не нужные "артефакты". Пришлось обойти http://codepen.io/BlackStar1991/pen/JbZgQG

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
html{
background: -webkit-linear-gradient(right, #000 50.99%, #fff 51%);
background: linear-gradient(to left, #000 50.99%, #fff 51%);
}
.medetationBox{
            position: relative;
            margin-top: 3%; 
            width: 100%;
            height: 300px;
}
.medetation{
            
width:300px;
height:300px;
position:absolute;
left:49.25%;
top:50%;
margin:-150px 0 0 -150px;
 
border-radius: 50%;
 
box-shadow: 0px 0px 100px grey;
 
-webkit-animation: aura 4s linear infinite alternate;
 
        animation: aura 4s linear infinite alternate;
}
 
@-webkit-keyframes aura{
    0%{
        box-shadow: 0px 0px 100px #7CA0B8;
    }
    100%{
        box-shadow: 0px 0px 20px #2B3438;
    }
}
 
@keyframes aura{
    0%{
        box-shadow: 0px 0px 100px #7CA0B8;
    }
    100%{
        box-shadow: 0px 0px 20px #2B3438;
    }
}
 
.st2{fill:#FFFFFF;
 
        }
.st3{fill:#E5E5E5;
    
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<div class="medetationBox">
        <div class="medetation">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve">
 
 
<g id="medetationMan">
        <g>
            <path class="st2" d="M180.8,151.9c-3.6,10-5.8,20.3-6,30.9c-0.1,5.4,3.8,9.9,4.1,15.4c0.4,6.2,2.7,9.7,10.1,10.5
                c22.3,2.5,40.2,14.7,57.7,27.6c4.1,3,6.3,10.2,4.8,14.8c-1.9,5.8-7.7,10.5-13.4,10.6c-13.6,0.2-27.2-2.1-40.8-0.9
                c-9.2,0.8-18.5,1-27.5-0.3c-9.7-1.4-12.5-1.3-22.1-2.7c1.7-0.5-0.2,0.8,0.6-0.3c2-2.6-0.9-9.3-0.1-14.6
                c-0.1-65.1-0.1-130.3-0.1-195.4c0-3.5,0-7-2-10.1c11.5-3.8,20.9,5.2,21.6,18.4c0.1,2.2-0.2,4.1,1.5,6.4c1.8,2.5-0.5,6.2-1.8,9.1
                c-1.8,4-3.8,7.9-5.8,11.8c-1.6,3.1-1.5,5.1,2.1,7.2c5.6,3.3,11.6,5.9,17.6,8.3c8.3,3.3,10.6,9.9,12.6,17.6
                c2.2,8.5,1.2,17.5,4.7,25.8c3.1,7.4,5.4,15.2,7.4,23.1c0.5,2.1,1.9,4.2,3.5,5.8c7.5,7.2,13.4,15.7,20.3,23.5
                c3.5,3.9,6.7,8.1,11.2,10.9c2.3,1.4,4.5,2.2,6.3-0.7c2.9-4.7,7.5-3.2,10.3-1.2c4.4,3.3,9.6,7.4,8,14.1c-0.9,4,1.4,4.4,3.9,5
                c1.1,0.3,2.3,0.2,3.5,0.1c1.1,0,2.3,0.4,2.4,1.3c0.1,1-1.1,1.4-2,1.8c-3.2,1.4-6.6,2.4-10,1.7c-3.6-0.7-7.2-1-10.8-0.9
                c-3,0.1-3.9-2.6-5.6-4c-12.1-9.6-25.4-17.5-37.8-26.7c-13.2-9.8-21.8-22-25.3-37.9c-0.4-1.7-0.7-3.5-1.1-5.2
                C182.2,152.4,182.2,150.8,180.8,151.9z"/>
            <path d="M145.2,37.6c1.8-0.2,3.3-1.2,3.8-0.4c0.5,0.9-0.1,3.7-0.1,5.1c0,21.6,0,43.2,0,64.9c0,46.7,0,93.5,0,140.2
                c0,5.1,1,9-0.4,10.2c-1.2,1.1-4.5-0.2-8.7,0.3c-15.4-2.1-30.3,1.9-45.3,4c-6.5,0.9-12.8,2-19.3,1c-6.8-1-9.7-5.8-11.4-11.7
                c-1.6-5.6,0-10,4.7-13.6c9.4-6.9,18.6-14.1,29.1-19.3c5.4-2.7,10.8-5.2,16.9-5.7c2.6-0.2,3.1-1.4,3.3-3.8
                c0.3-6.2,1.6-12.2,3.9-18c2.3-5.8,2.8-11.5,1.3-17.5c-1.3-5.3-2.1-10.8-3.1-16.2c-0.4-2.2-1.2-4-3.3-5.6
                c-1.2,3.8-2.6,7.2-3.4,10.6c-3,13-9.9,23.3-20.8,31.1c-8.9,6.5-17.4,13.4-26.9,19c-4.7,2.7-9.1,6.2-13.3,9.7
                c-8,6.8-17,5.4-26.1,3.5c-0.5-0.1-0.9-0.9-1.3-1.3c0.5-0.4,0.9-1.1,1.4-1.2c1.1-0.2,2.3,0,3.5-0.2c3-0.4,5.2-0.7,4.3-5.1
                c-1.2-6.2,6.1-14.6,12.3-15.1c1.3-0.1,2.5,0,3.7,1c5.2,4.5,6.7,4.4,11.8-0.5c6.4-6.1,11.9-13.1,17.6-19.8
                c0.3-0.4,0.6-0.9,0.9-1.2c14-11.7,17-28.9,22.3-44.8c2.6-7.8,2-16.4,4.1-24.5c1.6-6.3,4.7-10.7,10.9-13.2
                c5.7-2.3,11.1-5.4,16.7-7.8c4.3-1.8,5.2-4.8,3.6-8.7c-1.3-3.2-2.8-6.4-4.5-9.3c-2.5-4.2-5.3-8-1.9-13.3c1.2-1.8,0.1-4.9,0.3-7.4
                C132.2,44.6,136.7,39.5,145.2,37.6z"/>
            <path class="st3" d="M45.1,207.9c-1.6,2.9-2.8,5.6-2.9,8.7c0,1.1,0.4,2.8-1.3,2.7c-1.6-0.1-3.8-0.5-3.8-2.5
                c-0.1-2.9-0.8-6.4,3.4-7.5C41.9,209,42.8,207.5,45.1,207.9z"/>
        </g>
        <path d="M254.4,205.7c1.6,4,2.9,7.7,2.8,11.7c0,1.4-0.6,3.6,1.3,3.6c1.8,0,4.3-0.4,4.5-3c0.3-3.9,1.2-8.5-3.4-10.2
            C258,207.3,257,205.2,254.4,205.7z"/>
    </g>
 
</svg>
        </div>
    </div>
 
<audio autoplay>
    <source src="https://github.com/BlackStar1991/AudioSharing/blob/master/Meditation/Meditation.mp3?raw=true" type="audio/mpeg">
    <source src="https://github.com/BlackStar1991/AudioSharing/blob/master/Meditation/Meditation.ogg?raw=true" type="audio/ogg">
</audio>

Комментарий модератора

Код из песочницы дублируем на форуме!

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@Black_Star 23 / 22 / 17 Регистрация: 06.05.2016 Сообщений: 260

	Свойство box-shadow: разное значение 09.12.2016, 11:18. Показов 1409. Ответов 2 Метки нет (Все метки) Добрый день уважаемые. Вот возник интерес, есть ли возможность разделить свойство box-shadow: по граням? (Ну или найти альтернативу) Пример Допустим у нас есть div(квадрат). как сделать так, что б у него box-shadow: было разным значением на каждой гране ? 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	09.12.2016, 13:48
	Black_Star, нарисуйте как вы это видите. 0

Свойство box-shadow: разное значение

Решение