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:
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>效果图：
3、图片阴影样式
在html中，可使用filter属性来实现带阴影样式的边框。
filter 属性定义了元素(通常是)的可视效果，当和drop-shadow()函数一起使用，可给图像设置一个阴影效果。
filter:drop-shadow(h-shadow v-shadow blur spread color);
阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。 函数接受
h-shadow v-shadow (必须)
这是设置阴影偏移量的两个
如果两个值都是0, 则阴影出现在元素正后面 (如果设置了
这是第三个code>
这是第四个
注意: 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>（学习视频分享：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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
