text-shadow:水平阴影 垂直阴影 模糊距离 阴影颜色
注释:text-shadow 属性向文本添加一个文本或多个阴影，该属性是逗号分割的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定 省略的长度是0
h-shadow | 必需，水平引用的位置，允许负值
v-shadow | 必需垂直阴影的位置，允许负值
blur| 可选模糊的距离
cololr |可选阴影的颜色
文本阴影可以有多组值，多组之间用逗号隔开就可以
水平阴影正值在下边，负值在上边
模糊强度，值越大越模糊
下面进入实际操作，给德玛西亚之力设置文字阴影，水平阴影为3px，垂直阴影为3px 模糊的距离为3px 颜色为金色
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文字阴影</title>
<style>
.box{
font-size:40px; /*字体大小*/
font-family:"楷体" /*字体型号*/
color:red;/*字体颜色*/
/* 给文本设置阴影 text-shadow: 顺序为 水平阴影 垂直阴影 模糊的距离 阴影的颜色; */
text-shadow:3px 3px 3px gold;
}
</style>
</head>
<body>
<div class="box">德玛西亚之力</div>
</body>
</html>
效果图如下所示
如果想给一个元素设置两个阴影该怎么办，
文本阴影可以有多组值，多组之间用逗号隔开就可以
进入操作了,在原有的基础上再加一条文字给他设置两个阴影 。
在原来的下面添加<div class="m">盖伦<div>
然后再去<style>中添加
.m{
font-size:40px;
font-fmaily:"黑体"
color:red;
text-shadow:5px 5px 5px gold,-10px -10px 5px;
}
文字阴影说完了，再来说说盒子阴影
box-shadow:水平方向阴影 垂直方向阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影 水平阴影和垂直阴影必须的写，其余的是可以省略不写。
box-shadow:水平方向阴影 垂直方向阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影 水平阴影和垂直阴影必须的写，其余的是可以省略不写。
h-shadow 必须=水平阴影的位置，允许负值
v-shadow | 必须垂直阴影的位置，允许负值
blur |可选模糊尺寸
spread | 可选 阴影的尺寸
color 可选阴影的颜色
inset 可选 外部阴影outset改为内部阴影
| 值 | 描述 |
|---|---|
| h-shadow | 必须水平阴影的位置，允许负值 |
| v-shadow | 必须垂直阴影的位置，允许负值 |
| blur | 可选模糊尺寸 |
| color | 可选阴影的颜色 |
| inset | 外部阴影outset改为内部阴影 |
那就开始写代码了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
widht:100px;
height:100px;
border:1px solid red;
/*给这个盒子设置阴影 语法格式： box-shadow:水平方向的阴影 垂直方向的阴影 阴影的清晰度
阴影的大小 阴影的颜色 阴影的位置 inset 或outset(默认为outset))*/
box-shadow:3px 3px 3p 3px red,-4px -4px 2px 2px black;/*设置一个外面一个里面的*/
}
<style>
</head>
<body>
<div class="box"><div>
</body>
</html>
成品图仅供参考
436
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
