非零基础自学前端最后一遍一 HTML+CSS 10 CSS盒子模型 10.11 盒子模型-盒子阴影box-shadow

小鱼儿 2024-03-26 21:52 70阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  10 CSS盒子模型
         *   *  10.11 盒子模型-盒子阴影box-shadow
             *   *  10.11.1 盒子阴影 – box-shadow
                 *  10.11.2 盒子阴影 – 在线查看

![在这里插入图片描述][6597c549316c4c5894e3570667e821fc.png_pic_center]

#### 一 HTML+CSS ####

#### 10 CSS盒子模型 ####

##### 10.11 盒子模型-盒子阴影box-shadow #####

###### 10.11.1 盒子阴影 – box-shadow ######

*  box-shadow属性可以设置一个或者多个阴影
    
     *  每个阴影用<shadow>表示
     *  多个阴影之间用逗号,隔开，从前到后叠加
 *  <shadow>的常见格式如下
    
    ![在这里插入图片描述][36e879ccb8804e9e89fc59adac2255b4.png_pic_center]
    
     *  第1个<length>：offset-x, 水平方向的偏移，正数往右偏移
     *  第2个<length>：offset-y, 垂直方向的偏移，正数往下偏移
     *  第3个<length>：blur-radius, 模糊半径
     *  第4个<length>：spread-radius, 延伸半径
     *  <color>：阴影的颜色，如果没有设置，就跟随color属性的颜色
     *  inset：外框阴影变成内框阴影

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .box {
          
          width: 100px;
          height: 100px;
          background-color: #f00;
    
          box-shadow: 5px 5px 10px orange, 10px 10px 10px green;
        }
      </style>
    </head>
    
    <body>
    
      <div class="box"></div>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][a656fb1d78da42778d43a1f0f3800a3c.png_pic_center]

###### 10.11.2 盒子阴影 – 在线查看 ######

我们可以通过一个网站测试盒子的阴影:

*  https://html-css-js.com/css/generator/box-shadow/

![在这里插入图片描述][4c50720a2a244610a0e174f43f920178.png_pic_center]

[6597c549316c4c5894e3570667e821fc.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/42563add90bf4d4b8c404925cea6712f.png
[36e879ccb8804e9e89fc59adac2255b4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/b78b1461e4d34b5fae4d8b4aab3b98e0.png
[a656fb1d78da42778d43a1f0f3800a3c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/4b323c1c1bab425d90e79dd579fb13e6.png
[4c50720a2a244610a0e174f43f920178.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/5fd8499ccecd4dc9999c56f9b6ce7f06.png