• 5.盒子阴影（重点）

    提示：css3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。

    1、语法：

                                div{

                                      box-shadow:"h-shadow"或者“v-shadow”

                                      }

    解释：

    h-shadow       必须，水平阴影位置，允许负值。

    v-shadow       必须，垂直阴影位置，允许负值。

    blur                 可选为模糊距离。

    spread            可选为，阴影的尺寸。

    color               可选为，css阴影颜色

    imset               可选为，外部阴影outset改为内部阴影。

    注意：

    1、默认的是外阴影（outset），但是不可以写这个单词，否则无效阴影。

    2、盒子阴影不占用空间，不会影响其他盒子排列。

    h-shadow：

          正值：向右边走

          负值：向左边走，

    v-shadow：

           正值：向下边走

           负值：向上边走

    blur：

           数值越大：比较模糊

           数值月小：比较清晰或者实体

    spread：

         数值越大：影子尺寸越大

         数值越小：影子尺寸越小

    自己代码展示：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>盒子阴影重要title>
    9.     <style>
    10.         .box {
    11.             width: 200px;
    12.             height: 200px;
    13.             margin: 100px auto;
    14.             /* 外边框：
    15.              第一个表示上下移动
    16.              第二个表示不变 */
    17.             border: 1px solid red;
    18.             /* 这个表示边框
    19.               第一个：粗细
    20.               第二个：实线
    21.               第三个：边框颜色 */
    22.             /* border-radius: 50px; */
    23.             box-shadow: 10px 10px 10px 10px #000;
    24.             /* 这里“box-shadow”表示盒子阴影 
    25.             第一个值表示：h-shadow 表示阴影x轴移动、数值越大向左边移动、数值越小向右边移动 
    26.             第二个值表示：v-shadow  表示阴影y轴移动、数值越大向下移动、数值越小向下移动
    27.             第三个值表示：blur  表示阴影虚、实、数值越大越虚、数值越小或者负数越实
    28.             第四个值表示：spread 表示阴影大小尺度、数值越大阴影越大、数值越小阴影越小
    29.             第五个值表示： color 表示阴影颜色、跟css一样的用法
    30.             注意：
    31.                 我们一般系统默认的是外阴影
    32.                 我们盒子阴影一般不会占空间、不会影响盒子排列*/
    33.             background-color: pink;
    34.         }
    35.         
    36.         .box:hover {
    37.             /* 这里表示当我们鼠标移动到这个box这个板块、就会显示阴影 */
    38.             box-shadow: 10px 10px 10px 10px #000;
    39.         }
    40.     style>
    41. head>
    42.  
    43. <body>
    44.     <div class="box">div>
    45.  
    46. body>
    47.  
    48. html>

    显示结果：

    总结

    提示：这里对文章进行总结：
    例如：以上就是今天要讲的内容，本文仅仅简单介绍了盒子的阴影用box-shadow属性。

  • 相关阅读:
    B链圆桌派 — 创新的去中心化存储网络 BNB GREENFIELD 主网上线
    在linux上脱离hadoop安装hbase-2.5.6集群
    MySQL8 分页数据重复或丢失问题说明(order by limit)
    2022年科协第一次硬件大培训
    X86_64 栈和函数调用
    树状数组——逆序对（范围较小）
    LeetCode/LintCode 题解丨一周爆刷字符串：简化路径
    Presto+yanagishima部署
    GPT-3：自然语言处理的预训练模型
    ProtoBuf、Grpc、GORM、Go-redis 入门基础
  • 原文地址：https://blog.csdn.net/qq_62865634/article/details/127901976