• 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属性。

  • 相关阅读:
    1236 - 二分查找
    制造业数字化转型存在问题及原因分析
    dreamweaver作业静态HTML网页设计——摩尔庄园7页HTML+CSS+JS DW大学生网页作业制作设计 Dreamweaver简单网页
    Mybatis（ If条件失效 ）
    详谈滑动窗口算法与KMP算法区别以及二者在什么场景下使用
    mac搭建redis集群
    数字孪生推动军营智慧化管理，军事化应用战场空间可视化解决方案
    【无标题】
    Java设计模式-创建者模式-工厂模式
    Paxos分布式系统共识算法？我愿称其为点歌算法…
  • 原文地址：https://blog.csdn.net/qq_62865634/article/details/127901976