Home >Web Front-end >Front-end Q&A >What is the code for shadow style in html

What is the code for shadow style in html

青灯夜游Original: 2022-09-23 16:32:135155browse

Style code: 1. Text shadow style "text-shadow: h-shadow v-shadow blur color;"; 2. Border shadow style "box-shadow: h-shadow v-shadow blur spread color inset ;"; 3. Picture shadow style "filter:drop-shadow(h-shadow v-shadow blur spread color);".

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In HTML, there are three ways to add shadow styles to elements:

Text shadow: use the text-shadow attribute
Border shadow: use the box-shadow attribute
Picture shadow: use the filter attribute (needs to be used with the drop-shadow() function)

1. Text shadow style

In HTML, you can use the text-shadow attribute to implement shadowed text. The text-shadow attribute is applied to shadow text. .

Syntax

text-shadow: h-shadow v-shadow blur color;

Value	Description
h-shadow	Required. The position of the horizontal shadow. Negative values are allowed.
v-shadow	Required. The position of the vertical shadow. Negative values are allowed.
blur	Optional. Blurred distance.
color	Optional. The color of the shadow.

Note: The text-shadow property connects one or more shadow text. The property is a shadow, specifying every 2 or 3 length values and an optional color value separated by commas. The expired length is 0.

Example:

<!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:

What is the code for shadow style in html

2. Border shadow style

In html, you can use the box-shadow attribute to implement a border with a shadow style. The box-shadow property can set one or more drop-down shadow boxes.

Syntax

box-shadow: h-shadow v-shadow blur spread color inset;

Value	Description
h-shadow	Required. The position of the horizontal shadow. Negative values allowed
v-shadow	Required. The position of the vertical shadow. Negative values allowed
blur	Optional. Fuzzy distance
#spread	Optional. The size of the shadow
#color	is optional. The color of the shadow.
inset	Optional. Change shadow to inner shadow from outer shadow (at start)

注意：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>

效果图：

What is the code for shadow style in html

3、图片阴影样式

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

filter 属性定义了元素(通常是 What is the code for shadow style 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>

What is the code for shadow style in html

（学习视频分享：css视频教程）

The above is the detailed content of What is the code for shadow style in html. For more information, please follow other related articles on the PHP Chinese website!

html5 firefox css css3 html webkit Filter Length

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What are the html single line comment characters?Next article：What are the html single line comment characters?

See more

What is the code for shadow style in html

Related articles