Was ist der Code für den Schattenstil in HTML?
Stilcode: 1. Textschattenstil „Textschatten: H-Schatten-V-Schatten-Unschärfefarbe“; , Bildschattenstil „Filter: Schlagschatten (H-Schatten, V-Schatten, Unschärfe, Ausbreitungsfarbe);“.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
In HTML gibt es drei Möglichkeiten, Schattenstile zu Elementen hinzuzufügen:
Textschatten: Verwenden Sie das Textschatten-Attribut.
Randschatten: Verwenden Sie das Box-Shadow-Attribut.
Bildschatten: Verwenden Sie das Filterattribut (Muss zusammen mit der Funktion drop-shadow() verwendet werden)
1. Textschattenstil
In HTML können Sie das Textschattenattribut verwenden, um schattierten Text zu erzielen Das text-shadow-Attribut wird auf schattierten Text angewendet.
Syntax
text-shadow: h-shadow v-shadow blur color;
| Wert | Beschreibung |
|---|---|
| h-shadow | Erforderlich. Die Position des horizontalen Schattens. Negative Werte sind erlaubt. |
| v-shadow | Erforderlich. Die Position des vertikalen Schattens. Negative Werte sind erlaubt. |
| Unschärfe | optional. Verschwommene Distanz. |
| Farbe | optional. Die Farbe des Schattens. |
Hinweis: Die Eigenschaft text-shadow verbindet einen oder mehrere Schattentexte. Das Attribut ist ein Schatten, der alle 2 oder 3 Längenwerte und einen optionalen, durch Kommas getrennten Farbwert angibt. Die abgelaufene Länge beträgt 0.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置文本阴影效果</title>
<style>
h1 {
color: red;
text-shadow: 3px 5px 5px #656B79;
}
</style>
</head>
<body>
<h1 id="文本阴影">文本阴影！</h1>
</body>
</html>Rendering:
2. Rahmenschattenstil
In HTML können Sie das Box-Shadow-Attribut verwenden, um einen Rahmen mit Schattenstil zu implementieren. Mit der Box-Shadow-Eigenschaft können ein oder mehrere Dropdown-Schattenboxen festgelegt werden.
Syntax
box-shadow: h-shadow v-shadow blur spread color inset;
| Wert | Beschreibung |
|---|---|
| h-shadow | Erforderlich. Die Position des horizontalen Schattens. Negative Werte erlaubt |
| v-shadow | Erforderlich. Die Position des vertikalen Schattens. Negative Werte erlaubt |
| Unschärfe | Optional. Unschärfeabstand |
| Spreizung | optional. Die Größe des Schattens |
| Farbe | ist optional. Die Farbe des Schattens. |
| Einsatz | optional. Ändern Sie den Schatten vom äußeren Schatten in den inneren Schatten (zu Beginn) |
注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
示例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color:red;
-moz-box-shadow: 10px 10px 5px #888888;
/* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div>边框阴影</div>
</body>
</html>效果图：
3、图片阴影样式
在html中，可使用filter属性来实现带阴影样式的边框。
filter 属性定义了元素(通常是)的可视效果，当和drop-shadow()函数一起使用，可给图像设置一个阴影效果。
filter:drop-shadow(h-shadow v-shadow blur spread color);
阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。 函数接受
h-shadow v-shadow (必须)
这是设置阴影偏移量的两个
值. 设定水平方向距离. 负值会使阴影出现在元素左边. 设定垂直距离.负值会使阴影出现在元素上方。查看 可能的单位. 如果两个值都是0, 则阴影出现在元素正后面 (如果设置了
and/or ，会有模糊效果). (可选) 这是第三个code>
值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值 若未设定，默认是0 (则阴影的边界很锐利). (可选) 这是第四个
值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小). 注意: Webkit, 以及一些其他浏览器 不支持第四个长度，如果加了也不会渲染。
(可选) 查看
该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 会应用colorcolor属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。
<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
filter: drop-shadow(8px 8px 10px red);
}
</style>
</head>
<body>
<p>给图像设置一个阴影效果:</p>
<img src="/static/imghw/default1.png" data-src="pineapple.jpg" class="lazy" alt="Pineapple" style="max-width:90%" style="max-width:90%">
</body>
</html>
（学习视频分享：css视频教程）
Das obige ist der detaillierte Inhalt vonWas ist der Code für den Schattenstil in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Tabellenrahmen in HTML
Sep 04, 2024 pm 04:49 PM
Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.
Verschachtelte Tabelle in HTML
Sep 04, 2024 pm 04:49 PM
Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.
HTML-Rand links
Sep 04, 2024 pm 04:48 PM
Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.
HTML-Tabellenlayout
Sep 04, 2024 pm 04:54 PM
Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.
HTML-Eingabeplatzhalter
Sep 04, 2024 pm 04:54 PM
Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.
Text in HTML verschieben
Sep 04, 2024 pm 04:45 PM
Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.
HTML-geordnete Liste
Sep 04, 2024 pm 04:43 PM
Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele
HTML-Onclick-Button
Sep 04, 2024 pm 04:49 PM
Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.
