CSS предоставляет разработчикам широкий набор свойств и псевдоклассов для добавления желаемого стиля к элементам. Одним из примечательных свойств является свойство box shadow, которое может добавить эффект тени вокруг элемента.

Свойство box-shadow позволяет вам добавить несколько теней вокруг блока, указав цвет, размер, размытие, смещение и значения вставки.

Смещение тени определяется этими двумя значениями. Горизонтальное расстояние определяется смещением по горизонтали. Положительные значения дают тень справа от элемента. Отрицательные значения перемещают тень к левой стороне элемента. Расстояние по вертикали определяется смещением по вертикали. Положительное значение отбрасывает тень прямо под элементом. Когда значение отрицательное, тень размещается над элементом. Тень будет позади элемента, если оба значения равны 0.

Если blur radius установлено значение 0, тень будет резкой, чем выше число, тем более размытой она будет и тем дальше будет простираться тень. Например, тень с горизонтальным смещением 5 пикселей и радиусом размытия 5 пикселей будет иметь общую тень 10 пикселей.

spread radius , положительные значения увеличивают размер тени, а отрицательные значения уменьшают размер тени. Значение по умолчанию — 0 (тень имеет тот же размер, что и размытие).

Color, Окрашивает тень. Если это значение равно 0, используемый цвет определяется браузером.

Синтаксис:

box-shadow: [h-offset] [v-offset ] [blur radius]

Пример:

<html>

<head>
    body {
    height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    }

    div {
    width: 100px;
    height: 100px;
    }
    .area {
    display: grid;
    gap: 3rem;
    grid-template-columns: repeat(3, 1fr);
    }

    div:nth-child(1) {
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
    }
    div:nth-child(2) {
    box-shadow: 0.5rem 0.5rem black, -0.5rem -0.5rem #ccc;
    }
    div:nth-child(3) {
    box-shadow: 0 0 5px 5px red;
    }
    div:nth-child(4) {
    background: #eee;
    box-shadow: 0 8px 8px -4px lightblue;
    }
    div:nth-child(5) {
    border-radius: 50%;
    box-shadow: 0 0 50px #ccc;
    }
    div:nth-child(6) {
    box-shadow: 0 -5px 3px -3px black, 0 5px 3px -3px black;
    }
</head>

<body>
    <section class="area">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

</html>

Что такое вебкит?

Webkit — это движок веб-браузера Apple, который используется почти во всех приложениях macOS. Существует множество других движков веб-браузеров, таких как Gecko для Firefox и Blink для Edge. Поэтому возникает вопрос, зачем они нам нужны.

Подобно свойствам -moz, префикс -webkit в селекторах CSS обозначает свойства, предназначенные только для обработки этим движком. Указав это, мы, по сути, инструктируем браузер использовать это только тогда, когда используется конкретный движок браузера, и оставить его в покое в противном случае. Он довольно неудобен в использовании, поэтому многие разработчики надеются, что он скоро будет упразднен.

Webkit-box-shadow: Свойство CSS webkit-box-shadow используется для применения box-shadow. Реализация webkit-box-shadow зависит от браузера для браузеров WebKit, таких как Google Chrome и Safari.

Синтаксис:

webkit-box-shadow: h-offset v-offset blur;

Пример:

<html>
<head>
   <style>
      .BoxShadow {
         color: black;
         border: solid 1px grey;
         margin: 1.5rem 3rem;
         -webkit-box-shadow: 5px 10px 18px red;
      }
   </style>
</head>
<body>
   <div class="BoxShadow">
      <h1>This webkit-box-shadow</h1>
      <p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
   </div>
</body>
</html>

Ниже приведены некоторые различия между свойствами box-shadow и -webkit-box-shadow:

Тень блока:

Стандартной реализацией CSS является box-shadow.

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

Webkit-box-shadow:

Webkit-box-shadow, с другой стороны, представляет собой решение для браузеров WebKit, таких как Google Chrome и Safari, для конкретных браузеров.

В более ранних версиях используется свойство webkit-box-shadow.

Заключение

В заключение, основное различие между -webkit-box-shadow и box-shadow в CSS заключается в том, что последний является префиксом поставщика для свойства box-shadow, введенного браузерами Webkit. Свойство Box Shadow позволяет применять эффект тени к элементу без использования изображения или другого внешнего ресурса. Свойство -webkit-box-shadow больше не поддерживается и заменено стандартным синтаксисом box-shadow. Потому что он поддерживается подавляющим большинством современных браузеров. Подводя итог, можно сказать, что оба свойства используются для отбрасывания теней на элементы, но следует использовать только одно, потому что другое в будущем станет устаревшим.