CSS Box Shadow: несколько методов применения эффектов тени к элементам HTML

Свойство CSS, о котором вы говорите, называется «box-shadow». Он позволяет добавить эффект тени к элементу HTML. Вот несколько методов, которые можно использовать для применения тени блока:

Метод 1: встроенный CSS
Вы можете применить тень блока непосредственно к элементу HTML, используя встроенный CSS. Вот пример:

<div >Box Shadow Example</div>

В этом примере тень блока имеет горизонтальное смещение 2 пикселя, вертикальное смещение 2 пикселя, радиус размытия 4 пикселя и цвет с непрозрачностью 25 %.

Метод 2: внутренний CSS
Вы также можете использовать внутренний CSS, поместив тег стиля в заголовок вашего HTML-документа. Вот пример:

<head>
  <style>
    .box {
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
    }
  </style>
</head>
<body>
  <div class="box">Box Shadow Example</div>
</body>

В этом примере тень блока определяется во внутреннем разделе CSS и применяется к элементу HTML с классом «box».

Метод 3: внешний CSS
Другой подход — определить тень блока во внешнем файле CSS и связать ее с вашим HTML-документом. Вот пример:

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="box">Box Shadow Example</div>
</body>

В файле «styles.css» вы можете определить тень блока следующим образом:

.box {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
}