其他分享
首页 > 其他分享> > CSS 阴影

CSS 阴影

作者:互联网

CSS 阴影

基本上在 CSS 中,我们确实有两个主要属性,我们可以使用这些属性来使用阴影来设置元素的样式,即:

  1. 文字阴影
  2. 盒子阴影

文字阴影

但是,我们只能为所有元素和其中的文本添加阴影,除了 身体 元素本身。为了证明这一点,创建一个文件夹并在其中创建两个文件: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