CSS 阴影

2022-09-06 00:31:29 作者：互联网

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**

本文链接：https://www.qanswer.top/17482/20090600

标签：文字,阴影,添加,5px,CSS,属性
来源： https://www.cnblogs.com/amboke/p/16660221.html