首页 > 其他分享 >CSS 阴影

CSS 阴影

时间:2022-09-05 09:14:39浏览次数:70  
标签:文字 阴影 添加 5px 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/15434/56550508

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

相关文章

  • 动画标签 HTML CSS JavaScript
    动画标签HTMLCSSJavaScript动画标签HTMLCSSJavaScript免费下载HTML:<linkrel="样式表"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1......
  • [心情] 解放CSS 单行transform,分离scale, translate 和rotate 吧!
    [心情]解放CSS单行transform,分离scale,translate和rotate吧!定期都有在关注YoutubeWebDevSimplified的介绍前端新讯的影片,虽然很早就知道有一般拆解Transform属......
  • CSS Glassmorphism 按钮悬停效果
    CSSGlassmorphism按钮悬停效果CSSGlassmorphism按钮悬停效果免费下载在HTML和CSS中HTML:<head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compat......
  • HTML、CSS 和 JavaScript 格式的 3D 玻璃天气图标
    HTML、CSS和JavaScript格式的3D玻璃天气图标3D玻璃天气图标免费下载****在HTML、CSS和JavaScript中HTML:<divclass="weatherweather--sun"><divclass......
  • Web 中的可访问性 (CSS)
    PhotobyKOBU代理商on不飞溅Web中的可访问性(CSS)这是我关于Web上的可访问性的第二篇文章。在里面上一篇文章,我在HTML中谈到了Web上的可访问性,而这一次,......
  • CSS JS 规范+数据类型
    1、CSSJS规范+数据类型window.onload=function(){​//varstr='abc';​//varnum=123;​//varbool=true;​//varund=undefined;......
  • 使用CSS3快速实现毛玻璃效果
    使用CSS3实现毛玻璃效果并没有想象中那么难,我们只需要了解一个属性:backdrop-filter:blur(5px);在使用该属性之前我们先要区分backdrop-filter与filter的区别。filter......
  • 简单的Css动画---攀爬效果
    <!DOCTYPEhtml><htmllang="en"><head>  <metacharset="UTF-8">  <metahttp-equiv="X-UA-Compatible"content="IE=edge">  <metaname="viewport"c......
  • CSS常用属性
    ​ /**作者:呆萌老师*☑csdn认证讲师*☑51cto高级讲师*☑腾讯课堂认证讲师*☑网易云课堂认证讲师*☑华为开发者学堂认证讲师*☑爱奇艺千人名师计划成员*在这里......
  • 前端学习之------浏览器兼容(CSS)
    浏览器兼容指的是:由于各浏览器使用了不同的内核,使得网页在各种浏览器上的显示效果不一致,做好浏览器兼容,才能够让网站在不同浏览器上正常显示CSS方面:1、不同浏览器的标签......