Как да използвате CSS box-shadow: 13 трика и примери

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

Можете да промените цвета на фона, стила на шрифта, цвета на шрифта, сянката на полето, полето и много други свойства с помощта на CSS. Ще ви преведем през някои ефективни употреби на box-shadow в това ръководство.

Какво е CSS box-shadow?

The кутия-сянка свойство се използва за прилагане на сянка към HTML елементи. Това е едно от най -използваните CSS свойства за стилизиране на кутии или изображения.

CSS синтаксис:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

хоризонтално отместване: Ако хоризонталното отместване е положително, сянката ще бъде вдясно от полето. И ако хоризонталното отместване е отрицателно, сянката ще бъде вляво от полето.
вертикално отместване: Ако вертикалното отместване е положително, сянката ще бъде под полето. И ако вертикалното отместване е отрицателно, сянката ще бъде над полето.
радиус на замъгляване: Колкото по -висока е стойността, толкова по -замъглена ще бъде сянката.
радиус на разпространение: Това означава колко трябва да се разпространи сянката. Положителните стойности увеличават разпространението на сянката, отрицателните стойности намаляват разпространението.
Цвят: Означава цвета на сянката. Също така, той поддържа всеки цветен формат като rgba, hex или hsla.

Параметрите на размазване, разпръскване и цвят не са задължителни. Най-интересната част от box-shadow е, че можете да използвате запетая, за да отделите стойностите на shadow-box произволен брой пъти. Това може да се използва за създаване на множество рамки и сенки на елементите.

1. Добавете Dim-box-shadow към лявата, дясната и долната част на кутията

Можете да добавите много тъмни сенки към три страни (лява, дясна и долна) на полето, като използвате следния CSS-сенчест поле с вашия целеви HTML елемент:

box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

Изход:

2. Добавете Dim box-shadow към All Sides

Можете да добавяте светли сенки към всички страни на кутията, като използвате следния CSS-сенчест поле с вашия целеви HTML елемент:

box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

Изход:

3. Добавете тънка сенчеста кутия към долната и дясната страна

Можете да добавите сенки в долната и дясната страна на полето, като използвате следния CSS-сензор на кутия с целевия HTML елемент:

сравнете 2 файла в бележник ++

box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Изход:

4. Добавете тъмна кутия-сянка към All Sides

Можете да добавите тъмна сянка към всички страни на кутията, като използвате следния CSS-сензорен прозорец с вашия целеви HTML елемент:

box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

Изход:

5. Добавете разпръсната сянка към всички страни

Можете да добавите разсеяна сянка към всички страни на полето, като използвате следната команда с вашия целеви HTML елемент:

box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

Изход:

6. Добавете тънка гранична сянка към всички страни

Можете да добавите проста сянка на границата към всички страни на полето, като използвате следния CSS с целевия си HTML елемент:

box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;

Изход:

7. Добавете сенчеста кутия към долната и лявата страна

Можете да добавите сянка към долната и лявата страна на полето, като използвате следния CSS-сензор на кутия с вашия целеви HTML елемент:

box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;

Изход:

8. Добавете Dim-box-shadow към горната и лявата страна, Dark Shadow към долната и дясната страна

Можете да добавите светла сянка към горната и лявата страна на полето, както и тъмна сянка към долната и дясната страна на полето, като използвате следния CSS с целевия HTML елемент:

box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;

Изход:

9. Добавете тънка, цветна гранична сянка към всички страни

Можете да добавите обикновена оцветена рамкова сянка към всички страни на полето, като използвате следния CSS-сенчест поле с вашия целеви HTML елемент:

box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;

Изход:

10. Добавете многоцветни гранични сенки към долната и лявата страна на кутията

Можете да добавите многоцветни гранични сенки към долната и лявата страна на полето, като използвате следния CSS с вашия целеви HTML елемент:

box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

Изход:

Android игри с 2 играчи същото устройство

11. Добавете многоцветни гранични сенки към дъното

Можете да добавите многоцветни гранични сенки в долната част на полето, като използвате следния CSS-сенчест поле с вашия целеви HTML елемент:

box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;

Изход:

12. Добавете многоцветни гранични сенки към долната и дясната страна на кутията

Можете да добавите множество цветни сенки на границата към долната и дясната страна на полето, като използвате следния CSS с вашия целеви HTML елемент:

box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;

Изход:

13. Добавете светли сенки към лявата и дясната страна, разпръснете сянката отдолу

Можете да добавите светли сенки към лявата и дясната страна и да разпръснете сянката в долната част на полето, като използвате следния CSS-сенчест поле с вашия целеви HTML елемент:

box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

Изход:

Интегрирайте CSS с HTML страница

Сега знаете как да добавяте готини ефекти на сенчеста кутия с помощта на CSS, можете лесно да ги интегрирате с HTML елементи по много начини.

Свързани: 11 Полезни инструменти за проверка, почистване и оптимизиране на CSS файлове

Можете да го вградите в самата HTML страница или да го прикачите като отделен документ. Има три начина за включване на CSS в HTML документ:

Вътрешен CSS

Вградените или вътрешните таблици със стилове се вмъкват в раздел на HTML документ, използвайки елемент. Можете да създадете произволен брой елементи в HTML документ, но те трябва да бъдат затворени между и тагове. Ето пример, демонстриращ как да използвате Internal CSS с HTML документ:

  
  
  
  
 CSS box-shadow  
  
 .heading {  
 text-align: center;  
 }  
 .image-box {  
 display: block;  
 margin-left: auto;  
 margin-right: auto;  
 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;  
 }  
  
  
  
  
 Style 4

Вграден CSS

Вграденият CSS се използва за добавяне на уникални правила за стил към HTML елемент. Може да се използва с HTML елемент чрез стил атрибут. Атрибутът style съдържа CSS свойства под формата на 'свойство: стойност' разделени с точка и запетая ( ; ).

Свързани: Научете как да изграждате двуизмерни уебсайтове с CSS мрежа

Всички свойства на CSS трябва да са в един ред, т.е. не трябва да има прекъсвания на редове между свойствата на CSS. Ето пример, демонстриращ как да използвате вграден CSS с HTML документ:

  
  
  
  
 CSS box-shadow  
  
  
  
 Style 4

Външен CSS

Външният CSS е най -идеалният начин за прилагане на стилове към HTML документи. Външна таблица със стилове съдържа всички правила за стил в отделен документ (.css файл), след което този документ се свързва с HTML документа, използвайки етикет. Този метод е най -добрият метод за дефиниране и прилагане на стилове към HTML документите, тъй като засегнатият HTML файл изисква минимални промени в маркирането. Ето пример, демонстриращ как да използвате външен CSS с HTML документ:

Създайте нов CSS файл с .css разширение. Сега добавете следния CSS код в този файл:

.heading {  
 text-align: center;  
}  
.image-box {  
 display: block;  
 margin-left: auto;  
 margin-right: auto;  
 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;  
}

И накрая, създайте HTML документ и добавете следния код в този документ:

как да върнете игри на ps4

  
  
  
  
 CSS box-shadow  
  
  
  
  
 Style 4

Обърнете внимание, че CSS файлът е свързан с HTML документа чрез етикет и href атрибут.

Всички горепосочени три метода (Вътрешен CSS, Вграден CSS и Външен CSS) ще показват същия изход-

Направете вашата уеб страница елегантна с CSS

Използвайки CSS, имате пълен контрол над стила на вашата уеб страница. Можете да персонализирате всеки HTML елемент, като използвате различни CSS свойства. Разработчиците от цял свят допринасят за актуализациите на CSS и го правят от пускането му през 1996 г. Като такива, начинаещите имат какво да научат!

За щастие CSS е удобен за начинаещи. Можете да получите отлична практика, като започнете с няколко прости команди и видите къде ви отвежда вашето творчество.

Дял Дял Туит електронна поща 10 прости примера за CSS код, които можете да научите за 10 минути

Нуждаете се от помощ с CSS? Опитайте тези основни примери за CSS код, за да започнете, след което ги приложите към собствените си уеб страници.

Прочетете Напред Свързани теми

Програмиране
Уеб дизайн
CSS

За автора Юврадж Чандра(60 статии са публикувани)

Юврадж е студент по компютърни науки в Университета в Делхи, Индия. Той е страстен за Full Stack Web Development. Когато не пише, той изследва дълбочината на различните технологии.

Още от Yuvraj Chandra

Абонирайте се за нашия бюлетин

Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!

Щракнете тук, за да се абонирате