CSS 阴影
基本上在 CSS 中，我们确实有两个主要属性，我们可以使用这些属性来使用阴影来设置元素的样式，即：
- 文字阴影
- 盒子阴影
文字阴影
但是，我们只能为所有元素和其中的文本添加阴影，除了 身体 元素本身。为了证明这一点，创建一个文件夹并在其中创建两个文件：HTML 和 CSS。然后在 HTML 文件中，复制以下代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="index.css"> <title>CSS 阴影</title> </head> <body> <div> <p class="shadow">蝙蝠侠：黑暗骑士</p> </div> </body> </html>
然后将以下代码添加到 CSS 文件中：
身体{
背景颜色：黑色；
}
分区{ 背景颜色：白色； 显示：弯曲； 证明内容：中心； }
保存更改并链接 CSS 文件后，在浏览器上运行代码以查看呈现的页面。然后将以下代码添加到您的 CSS 文件中：
。阴影{
填充：10px；
字体大小：24px；
文字阴影：2px 2px 5px 蓝色；
}
然后刷新呈现的页面以查看更改。您应该在下面看到如下内容：
为了只为元素中的文本添加阴影，我们使用 6 文字阴影 CSS 属性。让我们以下面的代码为例来讨论一下：
＃阴影{
文字阴影：3px 5px 5px 棕色；
填充：10px；
}
的第一个值 文字阴影 属性是水平值，它越大，阴影向正确方向移动的距离越远。第二个值定义垂直值，它越大，阴影向下移动的距离越远。这两个值必须包含使用 文字阴影 财产。
经常添加第三个值来指定阴影的模糊量，它越高，添加的模糊量就越高。但是，通常不鼓励过多使用第三个值，因为它会使阴影看起来很糟糕——因此 5px 是推荐的使用值。
第四个值指定阴影颜色。
盒子阴影
这 盒子阴影 属性用于在元素外部添加阴影。这些值类似于 文字阴影 财产。让我们使用以下代码更好地理解这一点：
分区{ 填充：5px；
box-shadow: 5px 5px 5px 黄绿色； }
第一个值指定水平值，它越大，阴影在右侧移动得越远。第二个值指定垂直值，它越大，阴影向下移动的距离越远。每当您使用 盒子阴影 财产。
第三个值指定阴影的模糊量，越大阴影模糊量越高。与 文字阴影 属性，每当我们使用 盒子阴影 属性，推荐的第三个值是 5px，因为它太多会使阴影看起来很糟糕。
第四个值指定阴影颜色。
添加以上内容 盒子阴影 将代码添加到我们创建的同一个 CSS 文件中，然后刷新呈现的页面应该可以让我们看到：
快乐编码
同时， 是的 你可以在 Instagram 上关注我 ** @its_ngangasean** ** 在推特上** ** @nganga_sea**
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
本文链接：https://www.qanswer.top/17482/20090600
标签：文字,阴影,添加,5px,CSS,属性 From： https://www.cnblogs.com/amboke/p/16660221.html