Box shadow inset css: box-shadow — CSS | MDN

Leave a Comment / Css / By /

CSS свойство box-shadow

❮ Назад Вперед ❯

Свойство box-shadow дает возможность добавить одну или несколько теней к блоку, устанавливая следующие значения-color, size, blur, offset и inset. Можно указать параметры через запятую.

Если задано свойство border-radius для элемента с блочной тенью, то одинаковые скругленные углы применяются и для box shadow.

Есть две значения для установления тени offset. H-offset указывает на горизонтальное расстояние. Положительные значения смещают тень вправо от элемента. Отрицательные значения смещают тень влево от элемента. V-offset указывает на вертикальное расстояние. Положительное значение смещает тень вниз, а отрицательное значение — вверх. Если обе значения равны 0, то тень располагается за элементом.

Третье значение — blur. Чем больше радиус, тем больше размыта тень. Таким образом, тень становится больше и ярче. Отрицательные значения недопустимы. При значении 0 тень будет резкой.

Четвертое значение — inset. Оно добавляет внутреннюю тень к элементу. Если оно является значением по умолчанию, предполагается, что будет эффект падающей тени.

Пятое значение — spread. Положительные значения увеличивают размер тени, а отрицательные значения уменьшают. Если значение 0, то тень и элемент будут одного размера.

Шестое значение — color. Оно добавляет цвет к тени. Если значение 0, цвет будет зависеть от браузера.

При свойстве box-shadow необходимо использовать префиксы -moz- и -webkit- для Mozilla и Webkit.

box-shadow: none | h-offset v-offset blur spread color | inset | initial | inherit;

Теперь попробуем добавить тени к элементу.

Пример

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 150px;
      height: 50px;
      background-color: #eee;
      box-shadow: 5px 4px 10px #1c87c9;
      -moz-box-shadow: 5px 4px 10px #1c87c9;
      -webkit-box-shadow: 5px 4px 10px #1c87c9;
      }
    </style>
  </head>
  <body>
    <h3>Пример box-shadow</h3>
    <div></div>
  </body>
</html>

Попробуйте сами!

Добавим несколько теней к блоку:

Пример

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 50%;
      height: 100px;
      border: 1px solid;
      padding: 10px;
      box-shadow: 5px 5px #1c87c9, 10px 10px #ccc, 15px 15px #8ebf42;
      }
    </style>
  </head>
  <body>
    <h3>Несколько теней с box-shadow. </h3>
    <div></div>
  </body>
</html>

Попробуйте сами!

Добавим значение inset к элементу. Оно добавляет тень внутри блока:

Пример

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 150px;
      height: 50px;
      background-color: #eee;
      box-shadow: inset 8px 8px 10px grey, 8px 8px 10px black;
      -moz-box-shadow: inset 8px 8px 10px grey, 8px 8px 10px black;
      -webkit-box-shadow: inset 8px 8px 10px grey, 8px 8px 10px black;
      }
    </style>
  </head>
  <body>
    <h3>Свойство box-shadow со значением inset.</h3>
    <div></div>
  </body>
</html>

Попробуйте сами!

CSS box-shadow

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Полный CSS Справочник Дальше ❯


Пример

Добавление теней к различным элементам <div>:

#example1 {

    box-shadow: 5px 10px;
}

#example2 {
    box-shadow: 5px 10px #888888;
}

Подробнее примеры ниже.

Определение и использование

Свойство box-shadow присоединяет одну или несколько теней к элементу.

Значение по умолчанию:none
Inherited:no
Animatable:yes. Читайте о animatable
Version:CSS3
Синтаксис JavaScript: object.style.boxShadow=»10px 20px 30px blue»

Поддержка браузера

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Номера followed by -webkit- or -moz- Укажат первую версию, которая работала с префиксом.

Свойство
box-shadow10.0
4.0 -webkit-		9.04.0
3.5 -moz-		5.1
3.1 -webkit-		10.5

Синтаксис CSS

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

Примечание: Чтобы прикрепить к элементу более одной тени, добавьте список теней с разделителями-запятыми (SE «Попробуйте сами» пример ниже).

Значения свойств

ЗначениеОписание
noneЗначение по умолчанию. Тень не отображается
h-offsetОбязательно. Горизонтальное смещение тени. Положительное значение кладет тень на правую сторону коробки, отрицательное значение кладет тень на левую сторону коробки
v-offsetОбязательно. Смещение тени по вертикали. Положительное значение кладет тень под коробку, отрицательное значение кладет тень над коробкой
blurДополнительные. Радиус размытия. Чем выше число, тем более размытой будет тень
spreadДополнительные. Радиус разворота. Положительное значение увеличивает размер тени, отрицательное значение уменьшает размер тени
colorДополнительные. Цвет тени. Значением по умолчанию является цвет текста. Посмотрите на значения цвета CSS для полного списка возможных значений цвета.

Примечание: В Safari (на ПК) параметр Color является обязательным. Если цвет не указан, тень не отображается вовсе.

insetДополнительные. Изменяет тень от внешней тени (вначале) на внутреннюю тень
initialПрисваивает этому свойству значение по умолчанию. (Читайте о initial)
inheritНаследует это свойство из родительского элемента. (Читайте о inherit)

Совет: ПодроБнее о допустимых значениях (единицы измерения длины CSS)

Другие примеры

Пример

Добавьте эффект размытия в тень:

#example1 {
    box-shadow: 10px 10px 8px #888888;
}

Пример

Определите радиус разворота тени:

#example1 {
    box-shadow: 10px 10px 8px 10px #888888;
}

Пример

Определите несколько теней:

#example1 {
    box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}

Пример

Добавьте ключевое слово вставки:

#example1 {
    box-shadow: 5px 10px inset;
}

Пример

Изображения, брошенные на стол. В этом примере демонстрируется создание снимков «Polaroid» и поворот рисунков:

div.polaroid {
    width: 284px;
    padding: 10px 10px 20px 10px;
    border: 1px solid #BFBFBF;
    background-color: white;
    box-shadow: 10px 10px 5px #aaaaaa;
}

Похожие страницы

CSS Справочник: CSS Rounded Corners

HTML DOM Справочник: boxShadow Свойство

❮ Назад Полный CSS Справочник Дальше ❯

Популярное CSS

css текст
блоки css
css картинки
как сделать css
цвета css
шрифты css
css стили
елементы css
фон css
кнопки css
таблица css
размер css
ссылки css
изображение css
выравнивание css
внешние отступы css
внутренние отступы css
списки css
css ширина
css при наведении
css формы

Copyright 2018-2020 HTML5CSS.ru

Правила и Условия Политика конфиденциальности О нас Контакты

Как установить встроенную тень с помощью CSS?

Улучшить статью

Сохранить статью

  • Последнее обновление: 17 ноя, 2021

  • Читать
  • Обсудить
  • Практика
  • Видео
  • Курсы

    • Улучшить статью

    Сохранить статью

    В CSS свойство box-shadow добавляет эффекты тени вокруг фрейма элемента.

    Мы можем установить несколько эффектов вокруг элемента, разделенных запятыми. А box-shadow определяется как относительные значения смещения по осям X и Y относительно элемента, радиус размытия и распространения, а также цвет.

    В этой статье мы узнаем, как установить встроенную тень с помощью CSS. Свойство Inset изменяет внешнюю тень на внутреннюю.

    Примечание: По умолчанию тень генерируется вне поля, но с помощью вставки мы можем создать тень внутри поля.

    Синтаксис:

    box-shadow: h-offset  v-offset  blur  spread color | вставка;

    Подход: Чтобы дать элементу тень inset , мы будем использовать свойство box-shadow . В свойстве box-shadow мы определим значение h-offset (обязательно для эффекта горизонтальной тени), затем значение v-offset (обязательно для эффекта вертикальной тени).

    Мы также можем придать эффект размытия и распространить тень, используя значения размытия и распространения. В конце концов, мы будем использовать вставить ключевое слово , которое изменит тень внутри кадра.

    Example 1:

    HTML

    >

    >

    >

    >

    . установил значение h-offset как 5px, значение v-offset как 10px и цвет как зеленый.

    Пример 2:

    HTML

    < html >

     

    < head >

    < стиль >

             #GFG {

                 /* Для предоставления границы элементу */

                 граница: 1 пиксель сплошная;

                 /* Для заполнения */

                 padding: 10px;

                 /* Определение свойства box-shadow inset */

                 box-shadow: 5px 10px green inset;

             }

     

             h3 {

      7           

             }

         style >

    head >

     

    < body >

     

         < H3 > Box-Shadow: 5px 10px вставка: H3 >

    < Div < DIV < Div < DIV < 7 < 7777777777777777777777778 .

     

    < p >Welcome to GeeksforGeeks p >

     

         div >

    Body >

    HTML >

    < html >

     

    < head >

         < style >

             #GFG {

    /* Для предоставления границы элементу */

                 граница: 1 пиксель сплошная;

                 /* Для отступов */

                 отступы: 10 пикселей;

                 /* Определение свойства box-shadow как вставки */

                 px box-shadow: 5px 105px 20px inset;

    }

    H3 {

    Color: Green;

             }

         style >

    head >

     

    < body >

     

         < h3 >box-shadow: 5px 10px 20px 5px Зеленая вставка: h3 > 3 0  9 0 0077  < DIV ID = "GFG" >

    9007

    < P

    . >

    DIV >

    7 9007,> 7778 9007,> 7778 7 700077, .0002

    HTML >

    Выход:

    Обзор: . -значение смещения 10 пикселей, значение размытия 20 пикселей, значение распространения 5 пикселей и зеленый цвет.

     

    Поддержка браузера

    Браузер

    Версия

    Chrome

    10.0 4.0 -webkit-

    Internet Explorer

    9. 0

    Firefox

    4.0 3.5 -moz-

    Safari

    5.1 3.1 -Webkit-

    Opera

    10,5

    9003 9003 9003

    9000 9003. Могу ли я использовать... Таблицы поддержки для HTML5, CSS3 и т. д.

    Могу ли я использовать

    Поиск

    ?

    Свойство CSS: box-shadow: `inset`

    • Глобальное использование
      96,94% + 0,54% знак равно 97,48%
    IE
    1. 6–8: не поддерживается
    2. 9–10: частичная поддержка
    3. 44% - Partial support"> 11: частичная поддержка
    Edge
    1. 12–106: поддерживается 80640 107: поддержан
    Firefox
    1. 2 - 3: не поддерживается
    2. 3,5 - 3,6: Поддержано
    3. 4 - 106: Поддержано
    4. 107: поддержано
    5. 108 -109: 10,0908
    6. 107: поддержано
    7. 108 -109: 10908
    8. 107: поддержано
      9. 4 108 -1090908
    9. . 4 - 9: Поддерживается
    10. 10 - 106: Поддерживается
    11. 107: Поддерживается
    12. 03% - Supported"> 108 - 110: Поддерживается
    SAFARI
    1. 3.1 - 4: не поддержано
    2. 5: Поддержка
    3. .10.10.10.10.10.10.10.10: 1.10: 1.10: 1.10.1: 1.10.10: 4.0008
    4. 16.1: поддержано
    5. 16,2 - TP: Поддерживается
    Opera
    1. 10: Не поддерживается
    2. 11,5 - 91: поддержан
    3. 92: Поддержал
    9
    2121222222222221222122212221222212121.
  • 4.2: Поддерживается
  • 5 - 16,0: Поддерживается
  • 24% - Supported"> 16.1: Поддерживается
    • Opera Mini
    1. ALL: поддержка Unknown
    Android Browser
    9
      9074 2. 2907 2. 2907 2. 2907 2. 2907 2. 2,0634 2.
    2. 29074. 29074 2. 2. 2907 2.
    Android Browser 9062 2
      9074
      .0008
    1. 107: Supported
    Opera Mobile
    1. 12 - 12.1: Not supported
    2. 72: Supported
    Chrome for Android
    1. 107: Supported
    Firefox for Android
    1. 106: Supported
    UC Browser для Android
    1. 13.4: поддержка неизвестна
    Samsung Internet

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *