（前端）你了解shadow吗？—css属性:box-shadow、text-shadow详解 ...

郭卫东  金牌会员 | 2024-6-14 17:36:11 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 919|帖子 919|积分 2757

前言：
css中用于设置阴影的属性有三个，分别是：box-shadow(盒子阴影)、text-shadow(文本阴影) 以及filter：drop-shadow，本篇文章着重先容盒子阴影与文本阴影。
一、box-shadow(盒子阴影)
1、利用方式
  1. box-shadow: (inset) h-shadow v-shadow blur spread color inset;
复制代码
参数先容：
   

  • h-shadow：水平阴影位移，大于0时阴影右移，小于0时阴影左移；
  • v-shadow：垂直阴影位移，大于0时阴影下移，小于0是阴影上移；
  • blur：可选参数，阴影模糊半径，值越大颜色越淡，阴影越模糊，为正值，默以为0；
  • spread：可选参数，阴影扩散半径，值越大阴影面积越大，可正可负，默以为0；
  • color：可选参数，阴影颜色，默以为玄色；
  • inset：可选参数，内阴影，一般放在开头或末了
  2、利用示例
定义一个div盒子模型：
  1. <div class="shade"></div>
复制代码
盒子样式为：
  1. div {
  2.     width: 500px;
  3.     height: 500px;
  4.     margin: 100px auto;
  5.     background-color: #dbdbdb;
  6. }
复制代码
首先设置一个右移50px，下移50px的阴影：
  1. .shade {
  2.     box-shadow: 50px 50px skyblue;
  3. }
复制代码
运行结果如下：

我们对阴影进行一下更改，设置模糊半径与扩散半径为20px：
  1. .shade {
  2.     box-shadow: 50px 50px 20px 20px skyblue;
  3. }
复制代码

 再设置一下内阴影：
  1. .shade {
  2.     box-shadow: 50px 50px 20px 20px skyblue inset;
  3. }
复制代码

 设置inset内阴影的变化过程是怎样的呢？我们分以下几个步调来解释：
（1）假设我们将阴影的水平和垂直位移，以及模糊、扩散半径都去除，即设定以下样式：
  1. .shade {
  2.     box-shadow: 0px 0px 0px 0px skyblue inset;
  3. }
复制代码
这个时间可想象为我们的div盒子覆盖在阴影之上，且阴影与盒子大小同等。
（2）我们设置阴影的扩散半径为20px：
  1. .shade {
  2.     box-shadow: 0px 0px 0px 20px skyblue inset;
  3. }
复制代码

这个时间相称于我们的div盒子会水平垂直居中在我们的阴影中。
（3）设置模糊半径为20px
  1. .shade {
  2.     box-shadow: 0px 0px 20px 20px skyblue inset;
  3. }
复制代码

这个时间阴影内侧会发生模糊，即我们的div盒子发生模糊。以是可以看成div盒子设置了20px的模糊半径。
（4）设置阴影的水平垂直位移都为50px
  1. .shade {
  2.     box-shadow: 50px 50px 20px 20px skyblue inset;
  3. }
复制代码

这个时间我们可以看成是div盒子在水平、垂直方向移动了50px 。
整个变化过程如下所示：

以上就是box-shadow的全部参数解析，我们如今利用box-shaodow属性来实现一些特殊的结果。
3、实现案例
（1）实现特殊图案：
  1. <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        div {            width: 500px;            height: 500px;            margin: 100px auto;            background-color: #dbdbdb;        }        .shade {            box-shadow: -100px 100px 0px -50px skyblue,                100px -100px 0px -50px skyblue;        }    </style></head><body>    <div class="shade"></div></body></html>
复制代码
我们将上述代码中的div盒子背景颜色删除，使之成为一个透明颜色的盒子，便会呈现以下结果：

由这个案例可知，box-shadow可以给同一个元素设置多个阴影结果，并用逗号进行分隔。
（2）实现类似立体盒子：
  1. <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        div {            width: 200px;            height: 200px;            margin: 100px auto;            background-color: rgb(237, 237, 237)        }        .shade {            box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.039),                5px 5px 6px rgba(0, 0, 0, 0.057),                10px 9px 12px rgba(0, 0, 0, 0.07),                18px 16px 22px rgba(0, 0, 0, 0.083),                33px 31px 41px rgba(0, 0, 0, 0.101)        }    </style></head><body>    <div class="shade"></div></body></html>
复制代码
运行结果如下所示： 

 （3）实现内嵌盒子：
  1. <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        div {            width: 200px;            height: 200px;            margin: 100px auto;            border-radius：20px;            background-color: #eee;        }        .shade {            box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.039) inset,                5px 5px 6px rgba(0, 0, 0, 0.057) inset,                10px 9px 12px rgba(0, 0, 0, 0.07) inset;        }    </style></head><body>    <div class="shade"></div></body></html>
复制代码
运行结果如下： 

 二、text-shadow(文本阴影)
1、利用方式
  1. text-shadow: h-shadow v-shadow blur color;
复制代码
参数先容：
   

  • h-shadow：水平阴影位移，大于0时阴影右移，小于0时阴影左移；
  • v-shadow：垂直阴影位移，大于0时阴影下移，小于0是阴影上移；
  • blur：可选参数，阴影模糊半径，值越大颜色越淡，阴影越模糊，为正值，默以为0；
  • color：可选参数，阴影颜色，默以为玄色；
  参数含义与box-shadow相同，因此这里不再对各参数进行详细解释。可看到text-shadow并没有内阴影和扩散半径。
2、实现案例
镂空发光文字案例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  14.         body {
  15.             width: 100%;
  16.             height: 100vh;
  17.             display: flex;
  18.             justify-content: center;
  19.             align-items: center;
  20.             background-color: black;
  21.         }
  23.         p {
  24.             font: normal bold 5vw 'poppins';
  25.             letter-spacing: 5px;
  26.             /* 设置文本颜色与背景一致，并增加文本透明度 */
  27.             color: rgba(0, 0, 0, 0.5);
  28.             /* 文字描边 */
  29.             -webkit-text-stroke: 1px #00a8e0;
  30.         }
  32.         .shade {
  33.             /* 设置阴影 */
  34.             text-shadow: 5px 5px 5px #00a8e0;
  35.         }
  36.     </style>
  37. </head>
  39. <body>
  40.     <p class="shade">一角的努力—LXGeffort</p>
  41. </body>
  43. </html>
复制代码
上面代码首先对文本设置阴影，并将文本颜色设置与背景颜色同等，同时增加文本透明度，从而得到重影文本，再利用 -webkit-text-stroke 属性将文本进行描边处置处罚，最后运行结果如下：


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

正序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

郭卫东

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表