Css border тень: box-shadow — CSS | MDN

css — Объемная тень для элемента.

Задать вопрос

Вопрос задан 4 года 7 месяцев назад

Изменён 4 года 7 месяцев назад

Просмотрен 184 раза

Как лаконичнее можно сделать тень для элемента, чтобы он выглядел объемным? На данный момент я создаю отдельный элемент .bottom-frame-shadow задаю ему background: $shadow-back; и верхнюю границу, что сделать его объемным border-top: 1px solid black;. Можно ли сделать это как-то удобнее с помощью html или css?

$width-panel: 200px;
$radius-border: 7px;
$shadow-back: #441DBF;
$border: 2px solid black;
body {
  background: #6839FF;
    .panel {
      width: $width-panel;
      height: 200px;
      margin: 150px auto;
      border: $border;
      border-radius: $radius-border;
      box-shadow: 0 5px 0 0 $shadow-back;
      .  inner-panel {
        background: grey;
        margin: 10px;
        width: 175px;
        height: 170px;
        border: $border;
        border-radius: $radius-border;
    }
      .bottom-frame-shadow {
        margin-top: 0px;
        padding-top: 5.5px;
        width: $width-panel;
        border-top: 1px solid black;
        background: $shadow-back;
        border-radius: 0 0 7px 7px;
      }
  }
}
<div>
  <div>
  </div>
  <div>
  </div>
</div>

codepen

1

Так наверно ?

.panel {
  width: 200px;
  height: 200px;
  margin: 150px auto;
  border: 2px solid black;
  border-radius: 7px;
  box-shadow: 1px 5px 1px #555555, 3px 6px 1px #555555, 5px 7px 1px #555555, 7px 8px 1px #555555, 9px 9px 1px #ddd;
}

.inner-panel {
  background: grey;
  margin: 10px;
  width: 175px;
  height: 170px;
  border: 2px solid black;
  border-radius: 7px;
}

.
  bottom-frame-shadow {
  margin-top: 0px;
  padding-top: 5.5px;
  width: 200px;
  border-top: 1px solid black;
  background: #bbb;
  border-radius: 0 0 7px 7px;
  box-shadow: 1px 5px 1px #ddd, 3px 6px 1px #ddd, 5px 7px 1px #ddd, 7px 8px 1px #ddd, 9px 9px 1px #ddd;
}

<div>
  <div>
  </div>
  <div>
  </div>
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

box-shadow.

CSS стиль для тени CSS стиль box-shadow добавляет тень к элементу. Возможно использовать несколько теней, указывая их параметры через запятую, при этом каждая последующая тень будет ниже предыдущей. Настольные Мобильные

Internet Explorer	Chrome		Opera	Safari		Firefox
9	1	10	10.5	3	5.1	3.5	4

Android		Firefox Mobile		Opera Mobile	Safari Mobile
1	4	3.5	4	11	3	5.1

Краткая информация по CSS-свойству box-shadow

Значение по умолчанию	none
Наследуется	Нет
Применяется	Ко всем элементам

Правила написания CSS-стиля box-shadow

box-shadow: none | <тень> [,<тень>]

где <тень> — выражение вида:

inset <x> <y> <размытие> <растяжение> <цвет>

none — Отменяет добавление тени.

inset — Тень выводится внутри элемента. Необязательный параметр.

x — Смещение тени по горизонтали относительно элемента. Положительная величина задает сдвиг тени вправо, отрицательная — влево. Обязательный параметр.

y — Смещение тени по вертикали относительно элемента. Положительная величина задает сдвиг тени вниз, отрицательная — вверх. Обязательный параметр.

размытие — Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, то тень будет четкой, не размытой.

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

цвет — Цвет тени в любом доступном CSS формате, по умолчанию тень черная. Необязательный параметр.

Допускается указывать несколько теней, разделяя их параметры между собой запятой, при этом первая тень в списке размещается на самом верху, а последняя — в самом низу.

Пример применения стиля box-shadow

Проиллюстрируем работу box-shadow на примере выпадающего окна. Наша задача сделать объемный попап. Вот как это можно сделать:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тени с помощью box-shadow</title>
  <style>
   .shadow {
    background: #fc0; /* Цвет фона */
    box-shadow: 0 0 10px #00bff3; /* Параметры тени */
    padding: 10px;
   }
  </style>
 </head>
 <body>
  <div>Все условия выполнены!</div> 
 </body>
</html>

Применение тени box-shadow

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

❮ Пред. Следующий ❯

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

Свойство box-shadow является одним из свойств CSS3.

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

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

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

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

Вставлено четвертое значение. Он добавляет внутреннюю тень к элементу. Если это значение по умолчанию, предполагается, что тень является тенью.

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

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

 box-shadow: нет | h-смещение v-смещение размытие цвет распространения | вставка | начальная | наследовать; 

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

Пример свойства box-shadow:

 

  <голова>
    <стиль>
      дел {
        ширина: 150 пикселей;
        высота: 50 пикселей;
        цвет фона: #eee;
        box-shadow: 5px 4px 10px #1c87c9;
        -moz-box-shadow: 5px 4px 10px #1c87c9;
        -webkit-box-shadow: 5px 4px 10px #1c87c9;
      }
    
  
  <тело>
     
Пример Box-shadow
 
    <дел>
  
 

Попробуй сам »

Результат

У вас есть возможность много раз отделять тень блока запятой. Например, использование приведенного ниже кода покажет 3 тени разных цветов и позиций на одном и том же элементе.

Пример использования свойства box-shadow для добавления нескольких теней к элементу:

 

  <голова>
    <стиль>
      дел {
        ширина: 50%;
        высота: 100 пикселей;
        граница: сплошная 1px;
        отступ: 10 пикселей;
        тень блока: 5px 5px #1c87c9, 10px 10px #ccc, 15px 15px #8ebf42;
      }
    
  
  <тело>
     
Несколько теней с box-shadow.
 
    <дел>
  
 

Попробуй сам »

Результат

Теперь давайте присвоим элементу значение вставки. Он добавляет тень внутри коробки.

Пример свойства box-shadow со значением «inset»:

 

  <голова>
    <стиль>
      дел {
        ширина: 150 пикселей;
        высота: 50 пикселей;
        цвет фона: #eee;
        box-shadow: вставка 8px 8px 10px серый, 8px 8px 10px черный;
        -moz-box-shadow: вставка 8px 8px 10px серая, 8px 8px 10px черная;
        -webkit-box-shadow: вставка 8px 8px 10px серая, 8px 8px 10px черная;
      }
    
  
  <тело>
     
Box-shadow со вставленным значением
 
    <дел>
  
 

Попробуй сам »

Результат

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

 .shadow {
  box-shadow: 0 10px 8px -4px желтый;
} 

Пример свойства box-shadow с отрицательным значением радиуса распространения:

 

  <голова>
    <стиль>
      .тень {
        ширина: 100 пикселей;
        высота: 100 пикселей;
        box-shadow: 0 10px 8px -4px желтый;
        цвет фона: #cccccc;
      }
    
  
  <тело>
    <дел>
  
 

Попробуй сам »

Использование box-shadow для создания границы

Вы когда-нибудь задавались вопросом, почему так много разработчиков, даже разработчиков внешнего интерфейса, стараются избегать использования CSS. Разработчики очень часто проявляют энтузиазм, когда им приходится делать что-то новое с такими фреймворками, как Angular, React, Vue.js… или когда изучают новую технологию или язык, но они проявляют гораздо меньший энтузиазм, когда мы говорим о CSS. И кажется, я знаю почему! В CSS нет стандартов. Часто есть много способов сделать одно и то же, и я должен признать, что это может раздражать, потому что вы даже не знаете, хорошо это или плохо то, что вы делаете. И моя сегодняшняя статья представляет вам одну из самых простых вещей, которые вы можете сделать в CSS: добавление рамки к блоку . Очевидно, это просто, но я представлю вам (надеюсь) новый способ сделать это…

Использование свойства границы

Таким образом, добавить границу к блоку довольно просто, если вы используете граница собственности. Давайте начнем с первого простого примера, нарисовав маленький квадрат и добавив к нему красную рамку. Я добровольно добавляю некоторый контент в div с небольшим отступом, он понадобится для следующей статьи:

 

  Граница

 

 раздел {
  ширина: 100 пикселей;
  высота: 100 пикселей;
  отступ: 5px;
  нижняя граница: 10px;
}
.граница{
  граница: 1px сплошной красный;
}
 

Теперь предположим, что вам нужно добавить стиль, когда ваша мышь проходит над квадратом, например, усиление границы. Давайте сделаем наше первое решение со свойством границы:

 div {
  ширина: 100 пикселей;
  высота: 100 пикселей;
  отступ: 5px;
}
. граница{
  граница: 1px сплошной красный;
  
  &: наведите {
  граница: 3 пикселя сплошного красного цвета;
  }
}
 

Вы видите, что происходит, когда ваша мышь наводит курсор на коробку? Ваш контент движется вперед, а рендеринг не очень красивый.

Box-shadow

Это свойство очень полезно, когда вам нужно добавить тень к элементу. Вы часто используете это свойство, когда вам нужно вывести прямоугольник из фона, например:

Но знаете ли вы, что это свойство можно использовать только для рисования границ? Это сложнее, чем просто использовать свойство border , но вы сможете решить некоторые странные проблемы, подобные той, которую мы видели ранее. Итак, вот спецификация box-shadow свойство:

box-shadow: вставка | смещение-х | смещение-y | радиус размытия | радиус распространения | цвет

• вставка: указывает, будет ли тень находиться внутри или снаружи кадра. Вы можете опустить это свойство.
• offset-x: вы можете установить длину эффекта тени. Вы можете указать отрицательные значения для отображения тени слева.
• offset-y: Вы можете установить длину эффекта тени. Вы можете указать отрицательные значения, чтобы отобразить тень вверху.
• blur-radius: определяет длину размытия, чтобы тень стала больше и светлее. Это не то, что мы будем использовать в нашем примере.
• spread-radius: Используйте это свойство, чтобы расширить (с положительными значениями) или уменьшить (с отрицательными значениями) ваши тени.
• цвет: Установить цвет тени!

Итак, вот небольшой обзор рисования границ со свойством box-shadow :

 box-shadow: 0 1px 0 0 red; /* Нижняя граница */
box-shadow: 0 -1px 0 0 красный; /* Верхняя граница */
box-shadow: -1px 0 0 0 красный; /* Граница слева */
box-shadow: 1px 0 0 0 красный; /* Граница справа */
box-shadow: 0 0 0 1px красный; /* Все границы, используя свойства распространения */
 

Имея это в виду, теперь мы можем использовать box-shadow для решения нашей предыдущей проблемы.