В этом блоге мы обсудим метод применения теневых эффектов к элементам HTML.
Как применить эффект тени к элементам HTML с помощью CSS?
“ коробка-тень ” добавляет тень вокруг элемента, где два или более дополнительных значения эффекта могут быть разделены запятыми.
Синтаксис свойства box-shadow описан ниже.
Синтаксис
коробка-тень : никто |h-смещение v-смещение цвет размытия | вставка | исходный | вы наследуете ;
Описание вышеупомянутого синтаксиса приведено ниже:
- “ никто ”: это значение свойства box-shadow по умолчанию.
- “ h-смещение ”: это значение представляет горизонтальное расстояние.
- “ v-смещение ”: Это значение определяет расстояние по вертикали.
- “ размытие ”: третье значение — размытие. Максимальное увеличение его значения максимизирует эффект размытия.
- “ распространять ”: четвертое значение представляет собой распространение тени. Он может содержать положительные или отрицательные значения, где положительное значение увеличивает спред, а отрицательное значение уменьшает его.
- “ цвет ”: это значение является необязательным и представляет текущий цвет.
- “ исходный ”: это значение устанавливает свойство его начального значения.
- “ вы наследуете ”: это значение наследует свойство своего родительского элемента.
- “ вставка ”: значение вставки используется для создания теней внутри блока.
Давайте посмотрим, как выглядит эффект тени на практическом примере.
Пример
В файле HTML сначала добавьте « <дел> ». Внутри этого элемента
и
, чтобы предоставить содержимое веб-странице.
HTML
< див >< h1 > Тень коробки < / h1 >
< п > коробка-тень: 3px 8px < / п >
< / див >
Теперь примените свойства CSS к добавленным элементам HTML.
CSS
див {коробка-тень : 3 пикселя 8 пикселей ;
}
Элемент div применяется со свойством « коробка-тень ' со значением ' 3px 8px ”, который представляет смещение по горизонтали и смещение по вертикали.
Вывод
В следующем разделе HTML-элементы будут оформлены с использованием различных свойств.
CSS
див {граница : 5 пикселей твердый RGB ( 255 , 111 , 1 ) ;
коробка-тень : 3 пикселя 8 пикселей 9 пикселей 4 пикселя #f4af1b ;
}
Ниже приведены дополнительные свойства CSS, применяемые к элементу div:
- “ граница ” присваивается значение 5px solid rgb(255, 111,1), где 5px указывает ширину границы, solid представляет стиль границы, а rgb(255, 111, 1) — цвет.
- “ коробка-тень ” со значением 3px 8px 9px 4px #f4af1b представляет смещение по горизонтали как 3 пикселя, смещение по вертикали как 8 пикселей, размытие как 9 пикселей, распространение как 4 пикселя, а #f4af1b определяет цвет.
Приведенный выше код отобразит элемент div, как показано ниже:
Теперь в следующем разделе создайте два блока, представляющих два элемента div. Мы дадим каждому из них несколько разных значений box-shadow и посмотрим на результаты.
HTML
<идентификатор раздела знак равно 'коробка1' ><р > коробка-тень : 3 пикселя 8 пикселей 9 пикселей 4 пикселя #f4af1b >
>
<идентификатор раздела знак равно 'коробка2' >
<р > коробка-тень : 3 пикселя 8 пикселей 9 пикселей 4 пикселя #f4af1b >
>
Блок стилей1 div
#ящик1 {ширина : 40% ;
рост : 140 пикселей ;
граница : 5 пикселей твердый #ff9c83 ;
коробка-тень : 8 пикселей 10 пикселей 15 пикселей 20 пикселей #807f7f ;
}
Здесь:
- “ #ящик1 ” используется для доступа к div с id box1.
- “ ширина ” используется для установки ширины элемента.
- “ рост » задает высоту элемента.
- “ граница ” получает значение 5px solid #ff9c83, где 5px указывает ширину границы, solid представляет стиль границы, а #ff9c83 — цвет.
- “ коробка-тень ” свойство будет установлено как “ 8px 10px 15px 20px #807f7f », где 8px — смещение по горизонтали, 10px — смещение по вертикали, 15px — эффект размытия, 20px — эффект распространения и #807f7f — цвет тени.
Раздел стиля box2
#коробка2 {ширина : 40% ;
рост : 140 пикселей ;
граница : 5 пикселей твердый RGB ( 255 , 111 , 1 ) ;
коробка-тень : вставка 4 пикселя 8 пикселей #f4af1b ;
поле слева : 350 пикселей ;
}
Можно заметить, что мы стилизовали div box2 с теми же свойствами:
Дополнительный совет: добавление нескольких теней к HTML-элементу
“ коробка-тень ” можно использовать для добавления нескольких теневых эффектов к HTML-элементу. Это можно сделать, используя запятые между каждой тенью, как показано в следующем примере:
коробка-тень : 6 пикселей 6 пикселей RGB ( 91 , 0 , 143 ) , 12 пикселей 5 пикселей RGB ( 201 , 8 , 8 ) , 16 пикселей 16 пикселей 8 пикселей RGB ( 226 , 213 , 29 ) ;Как видите, несколько теней были успешно применены:
Это было все об использовании тени границы CSS.
Заключение
“ коробка-тень Свойство в CSS используется для применения эффектов тени к элементам HTML. Это свойство в основном состоит из двух значений: смещения по горизонтали и смещения по вертикали, но может быть несколько значений, таких как эффект размытия, эффект радиуса распространения, цвет и т. д. Кроме того, вы также можете добавить несколько теней к элементам, используя запятые между каждым свойством box-shadow. В этой статье объясняется свойство box-shadow CSS с практическими примерами.