HTML е езикът, използван за осигуряване на структурата на уеб страниците, а CSS ни позволява да прилагаме стилове към елементите. На една уеб страница се задават различни стойности на свойства, за да се прилагат различни стилове, като фонов цвят, размер на шрифта, граница, радиус на границата и сянка на полето е един от тях.

Този блог ще обсъди метода за прилагане на ефекти на сенки към HTML елементи.

Как да пуснете ефект на сянка върху HTML елементи с помощта на CSS?

„ кутия-сянка ” добавя сянка около елемент, където две или повече добавени стойности на ефекта могат да бъдат разделени със запетаи.

Синтаксисът на свойството box-shadow е описан по-долу.

Синтаксис

кутия-сянка : нито един |h-офсет v-офсет размазване разпръснат цвят | вмъкване | начален | ти наследяваш ;

Описанието на гореспоменатия синтаксис е посочено по-долу:

“ нито един ”: Това е стойността по подразбиране на свойството box-shadow.
“ h-отместване ”: Тази стойност представлява хоризонталното разстояние.
“ v-отместване ”: Тази стойност определя вертикалното разстояние.
“ размазване ”: Третата стойност е замъгляване. Увеличаването на неговата стойност ще увеличи максимално ефекта на размазване.
“ разпространение ”: Четвъртата стойност представлява разпространението на сенките. Може да съдържа положителни или отрицателни стойности, като положителната стойност увеличава спреда, а отрицателната стойност го намалява.
“ цвят ”: Тази стойност не е задължителна и представлява текущия цвят.
“ начален ”: Тази стойност задава свойството на първоначалната си стойност.
“ ти наследяваш ”: Тази стойност наследява свойството на своя родителски елемент.
“ вмъкване ”: Вмъкнатата стойност се използва за създаване на сенки вътре в кутията.

Нека да видим как изглежда ефектът на сянката чрез практически пример.

Пример

В HTML файла първо добавете „

”. Вътре в този елемент

добавете тагове

и
, за да предоставите съдържание на уеб страницата.

HTML

< див >

< h1 > Сянката на кутията < / h1 >

< стр > кутия-сянка: 3px 8px < / стр >

< / див >

Сега приложете свойствата на CSS към добавените HTML елементи.

CSS

див {

кутия-сянка : 3px 8px ;

}

Елементът div се прилага със свойството „ кутия-сянка ' със стойността ' 3px 8px ”, което представлява хоризонталното и вертикалното отместване.

Изход

В следващия раздел HTML елементите ще бъдат стилизирани с различни свойства.

CSS

див {

граница : 5px твърдо rgb ( 255 , 111 , 1 ) ;

кутия-сянка : 3px 8px 9px 4px #f4af1b ;

}

Следват допълнителните CSS свойства, приложени към елемента div:

“ граница ” на свойството е присвоена стойност 5px solid rgb(255, 111,1), където 5px показва ширината на границата, solid представлява стила на границата, а rgb(255, 111, 1) е цветът.
“ кутия-сянка ” свойството със стойност 3px 8px 9px 4px #f4af1b представлява h-offset като 3px, v-offset като 8px, blur като 9px, spread като 4px и #f4af1b определя цвета.

Горепосоченият код ще покаже елемента div, както е показано по-долу:

Сега, в следващия раздел, създайте две кутии, представляващи два елемента div. Ще дадем на всеки от тях различни стойности на множество полета и ще наблюдаваме резултатите.

HTML

= 'кутия1' >

> Сянката на кутията >

<стр > кутия-сянка : 3px 8px 9px 4px #f4af1b >

> > >

= 'кутия2' >

> Сянката на кутията >

<стр > кутия-сянка : 3px 8px 9px 4px #f4af1b >

>

Style box1 div

#кутия1 {

ширина : 40% ;

височина : 140 пиксела ;

граница : 5px твърдо #ff9c83 ;

кутия-сянка : 8px 10px 15px 20px #807f7f ;

}

Тук:

“ #кутия1 ” се използва за достъп до div с id box1.
“ ширина ” се използва за настройка на ширината на елемента.
“ височина ” Свойството задава височината на елемента.
“ граница ” е дадена стойност 5px solid #ff9c83, където 5px показва ширината на рамката, solid представлява стила на рамката, а #ff9c83 е цветът.
“ кутия-сянка ” свойството ще бъде зададено като „ 8px 10px 15px 20px #807f7f ”, където 8px е хоризонтално отместване, 10px е вертикално отместване, 15px е ефектът на размазване, 20px е ефектът на разпространение и #807f7f е цветът на сянката.

Style box2 div

#кутия2 {

ширина : 40% ;

височина : 140 пиксела ;

граница : 5px твърдо rgb ( 255 , 111 , 1 ) ;

кутия-сянка : вмъкване 4px 8px #f4af1b ;

margin-left : 350 пиксела ;

}

Може да се забележи, че стилизирахме box2 div със същите свойства:

Бонус съвет: Добавяне на множество сенки към HTML елемент

„ кутия-сянка ” може да се използва за добавяне на множество ефекти на сянка към HTML елемент. Това може да стане с помощта на запетаи между всяка сянка, както е показано в примера по-долу:

кутия-сянка : 6px 6px rgb ( 91 , 0 , 143 ) , 12px 5px rgb ( 201 , 8 , 8 ) , 16px 16px 8px rgb ( 226 , 213 , 29 ) ;

Както можете да видите, множество сенки са приложени успешно:

Това беше всичко относно използването на сянката на границата на CSS.

Заключение

„ кутия-сянка ” в CSS се използва за прилагане на ефекти на сянка към HTML елементи. Това свойство се състои главно от две стойности, които са за хоризонтално отместване и вертикално отместване, но може да има множество стойности, като например за ефект на замъгляване, ефект на радиус на разпространение, цвят и др. Освен това можете също да добавите множество сенки към елементите, като използвате запетаи между всяко свойство box-shadow. Тази статия обяснява свойството CSS box-shadow с практически примери.

CSS сянка на границата