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,属性 来源： https://www.cnblogs.com/amboke/p/16660221.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。