suchen

Heim >Web-Frontend >Front-End-Fragen und Antworten >Was ist der Code für den Schattenstil in HTML?

Was ist der Code für den Schattenstil in HTML?

青灯夜游
青灯夜游Original
2022-09-23 16:32:135160Durchsuche

Stilcode: 1. Textschattenstil „Textschatten: H-Schatten-V-Schatten-Unschärfefarbe“; , Bildschattenstil „Filter: Schlagschatten (H-Schatten, V-Schatten, Unschärfe, Ausbreitungsfarbe);“.

Was ist der Code für den Schattenstil in HTML?

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>文本阴影！</h1>
    </body> 
</html>

Rendering:

Was ist der Code für den Schattenstil in HTML?

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>

效果图：

Was ist der Code für den Schattenstil in HTML?

3、图片阴影样式

在html中，可使用filter属性来实现带阴影样式的边框。

filter 属性定义了元素(通常是Was ist der Code für den Schattenstil in HTML?)的可视效果，当和drop-shadow()函数一起使用，可给图像设置一个阴影效果。

filter:drop-shadow(h-shadow v-shadow blur spread color);

阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。 函数接受(在CSS3背景中定义)类型的值，除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。参数如下：

  • 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="pineapple.jpg" alt="Pineapple" width="300"    style="max-width:90%">

</body>
</html>

Was ist der Code für den Schattenstil in 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!

html5 firefox css css3 html webkit Filter Length
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Was sind die einzeiligen HTML-Kommentarzeichen?Nächster Artikel：Was sind die einzeiligen HTML-Kommentarzeichen?

In Verbindung stehende Artikel

Mehr sehen