Box shadow примеры: Box-Shadow CSS3: тень блока (примеры)

CSS3 box-shadow Property

❮ Предыдущая Следующая ❯

пример

Добавьте окно-тень на <div> элемент:

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

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

Больше «Try it Yourself» примеры ниже.

---

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

Кассовые теневое свойство придает одно или несколько тени к элементу.

Значение по умолчанию:	none
Наследование:	no
Animatable:	yes. Read about animatable Try it
Версия:	CSS3
Синтаксис JavaScript:	object .style.boxShadow=»10px 20px 30px blue» Try it

---

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

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

Числа следуют -webkit- или -moz- указать первую версию, которая работала с приставкой.

Имущество
box-shadow	10,0 4.0 -webkit-	9.0	4.0 3.5 -moz-	5.1 3.1 -webkit-	10.5

---

CSS Синтаксис

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

Note: Блок-теневое свойство придает одно или несколько тени к элементу. Свойство разделенный запятыми список теней, каждый задается 2-4 значений длины, необязательного цвета и необязательной вставки ключевого слова. Пропущенные длины равны 0.

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

Стоимость	Описание	Сыграй
none	Значение по умолчанию. не отображается тень	Сыграй »
h-shadow	Необходимые. Положение горизонтальной тени. Отрицательные значения разрешены	Сыграй »
v-shadow	Необходимые. Положение вертикальной тени. Отрицательные значения разрешены	Сыграй »
blur	Необязательный. Размытость расстояние	Сыграй »
spread	Необязательный. Размер тени. Отрицательные значения разрешены	Сыграй »
color	Необязательный. Цвет тени. Значение по умолчанию является черным. Посмотрите на CSS Цвет Значения для полного списка возможных значений цвета. Примечание: В Safari (on PC) требуется параметр цвета. Если вы не определяете цвет, тень не отображается на всех.	Сыграй »
inset	Необязательный. Изменяет тень от внешней тени (outset) к внутренней тени	Сыграй »
initial	Устанавливает это свойство в значение по умолчанию. Читайте о первоначальный	Сыграй »
inherit	Наследует это свойство от своего родительского элемента. Читайте о унаследовать

---

Еще примеры

Изображения , брошенные на стол
Этот пример демонстрирует , как создать «polaroid» фотографии и поворачивать изображения.

---

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

CSS3 учебник: CSS3 границы

HTML DOM ссылка: boxShadow property

❮ Предыдущая Следующая ❯

Практическое руководство. Создание текста с тенью — WPF .NET Framework

Twitter LinkedIn Facebook Адрес электронной почты

• Статья
• 02/06/2023
• Чтение занимает 2 мин

Примеры в этом разделе демонстрируют создание эффекта тени для отображаемого текста.

Пример

Объект DropShadowEffect позволяет создавать различные эффекты тени для объектов Windows Presentation Foundation (WPF). В следующем примере показано применение эффекта тени к тексту. В этом случае используется мягкая тень, то есть цвет тени размывается.

Можно управлять шириной тени, настроив свойство ShadowDepth. Значение 4.0 обозначает ширину тени, равную 4 точкам. Можно управлять мягкостью или размытием тени, изменив свойство BlurRadius. Значение 0.0 указывает на отсутствие размытия. В следующем примере кода показано создание мягкой тени.

<!-- Soft single shadow. -->
<TextBlock
  Text="Shadow Text"
  Foreground="Teal">
  <TextBlock.Effect>
    <DropShadowEffect
      ShadowDepth="4"
      Direction="330"
      Color="Black"
      Opacity="0.5"
     BlurRadius="4"/>
  </TextBlock.Effect>
</TextBlock>

Примечание

Эти эффекты тени не проходят через конвейер отрисовки текста Windows Presentation Foundation (WPF). Следовательно, тип ClearType при использовании этих эффектов отключен.

В следующем примере показано применение эффекта жесткой тени к тексту. В этом случае тень не размыта.

Можно создать сплошную тень, настроив свойство BlurRadius со значением 0.0

, чтобы указать, что размытие не используется. Можно управлять направлением тени, изменив свойство Direction. Задайте в качестве значения направления этого свойства градус от 0 до 360. На следующей иллюстрации показаны значения направления для параметра свойства Direction.

В следующем примере кода показано создание жесткой тени.

<!-- Hard single shadow. -->
<TextBlock
  Text="Shadow Text"
  Foreground="Maroon">
  <TextBlock.Effect>
    <DropShadowEffect
      ShadowDepth="6"
      Direction="135"
      Color="Maroon"
      Opacity="0.35"
      BlurRadius="0.0" />
  </TextBlock.Effect>
</TextBlock>

Использование эффекта размытия

Преобразование переноса BlurBitmapEffect можно использовать для создания аналогичного эффекта тени, который можно разместить позади текстового объекта. Если к тексту применяется эффект размытия для точечных рисунков, текст равномерно размывается во всех направлениях.

В следующем примере показан эффект размытия, примененный к тексту.

В следующем примере кода показано создание эффекта размытия.

<!-- Shadow effect by creating a blur. -->
<TextBlock
  Text="Shadow Text"
  Foreground="Green"
  Grid.Column="0" Grid.Row="0" >
  <TextBlock.Effect>
    <BlurEffect
      Radius="8.0"
      KernelType="Box"/>
  </TextBlock.Effect>
</TextBlock>
<TextBlock
  Text="Shadow Text"
  Foreground="Maroon"
  Grid.Column="0" Grid.Row="0" />

Использование преобразования переноса

Преобразование переноса TranslateTransform можно использовать для создания аналогичного эффекта тени, который можно разместить позади текстового объекта.

В следующем примере кода TranslateTransform используется для смещения текста. В этом примере слегка смещенная копия текста под основным текстом создает эффект тени.

В следующем примере кода показано создание эффекта тени с помощью преобразования.

<!-- Shadow effect by creating a transform. -->
<TextBlock
  Foreground="Black"
  Text="Shadow Text"
  Grid.Column="0" Grid.Row="0">
  <TextBlock.RenderTransform>
    <TranslateTransform X="3" Y="3" />
  </TextBlock.RenderTransform>
</TextBlock>
<TextBlock
  Foreground="Coral"
  Text="Shadow Text"
  Grid.Column="0" Grid.Row="0">
</TextBlock>

Коробка-тень | HTML & CSS Wiki

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

border-radius , тень блока будет иметь такие же закругленные углы. Z-порядок нескольких теней блоков такой же, как и несколько text-shadow s (первая указанная тень находится сверху).

Пример

Вот один из примеров использования коробка-тень :

 
Привет, мир!
 

Результат:

Привет, мир!

Значения

Можно использовать несколько значений, разделяя каждое из них пробелом.

Значение	Описание
вкладыш	По умолчанию. Если не указано иное, предполагается, что тень является тенью (как если бы поле было приподнято над содержимым). Наличие вкладыш изменяет тень на одну внутри рамки (как если бы содержимое было вдавлено внутри коробки). Вложенные тени рисуются над фоном, но ниже границы и содержимого.
<смещение-x> <смещение-y>	Это необходимо. Это два значения для установки смещения тени. <смещение-x> определяет расстояние по горизонтали. Отрицательные значения размещают тень слева от элемента. <смещение-у> указывает вертикальное расстояние. Отрицательные значения размещают тень над элементом. Примеры длины: px , em и т. д. Если оба значения равны 0 , тень размещается за элементом (и может создавать эффект размытия, если и/или ).
<радиус размытия>	Это третье значение . Чем больше это значение, тем больше размытие, поэтому тень становится больше и светлее. Отрицательные значения не допускаются. Если не указано, будет 0 (край тени резкий).
<радиус распространения>	Это четвертое значение . Положительные значения заставят тень расширяться и становиться больше, отрицательные значения заставят тень сжаться. Если не указано, будет 0 (тень будет того же размера, что и элемент).
<цвет>	В качестве значения используется допустимое название цвета или код цвета. Если не указано, цвет зависит от браузера. В Gecko (Firefox) значение используется свойство цвета . Тень WebKit прозрачна и поэтому бесполезна, если опущен.

Пример HTML:

 <дел>
ТЕКСТ

 раздел {
     -moz-box-shadow:0 0 100px белый;
     box-shadow:0 0 100px белый;
     -webkit-box-shadow:0 0 100px белый;
     фон: черный;
     отступ: 10 пикселей;
}
 

            
            <дел>
            
        
     

            
          <изображение
            src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp"
           
            alt="Голливудский знак на холме"
          />
        
        
     

 <дел> <дел> <дел> <изображение
 src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp" 
 alt="Голливудский знак на холме"
 />