box-shadow 属性可以设置一个或多个下拉阴影的框

可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。

语法：

box-shadow: h-shadow v-shadow blur spread color inset;
div.box{

    /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */

    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

}
 参数详解
值 描述
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset

可选。从外层的阴影（开始时）改变阴影内侧阴影

注意：这里 inset 参数只能设置在第一或者最后，其他位置无效！

　　　　　　　　===直接上代码===

（1）h-shadow 和 v-shadow 两个值表示阴影的偏移量

<!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>

        div{

            margin: 20px;

            display: inline-block;

            width: 100px;

            height: 100px;

            background-color: red;

        }

        .box1{

            box-shadow: 10px 10px blue;

        }

        .box2{

            box-shadow: -10px -10px blue;

        }

        .box3{

            box-shadow: -10px 10px blue;

        }

        .box4{

            box-shadow: 10px -10px blue;

        }

    </style>

</head>

<body>

    <div class="box1"></div>

    <div class="box2"></div>

    <div class="box3"></div>

    <div class="box4"></div>

</body>

</html>

结论：从上面结果可以看出，两个属性值可以取正值也可以取负值，并且方向为坐标系取值方向相同（x轴正值向右负值向左，y轴正值向下负值向上）

（2）blur  属性值表示阴影的模糊距离/半径（可选）

<!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>

        div{

            margin: 20px;

            display: inline-block;

            width: 100px;

            height: 100px;

            background-color: red;

        }

        .box1{

            /* 模糊距离为5 */

            box-shadow: 10px 10px 5px blue;

        }

        .box2{

            /* blur值为0等同于没设置模糊距离，没有模糊效果 */

            box-shadow: -10px -10px 0px blue;

        }

        .box3{

            /* blur值不能为负数，为负数则阴影失效 */

            box-shadow: -10px 10px -5px blue;

        }

        .box4{

            /* blur值越大越模糊 */

            box-shadow: -10px 10px 20px blue;

        }

    </style>

</head>

<body>

    <div class="box1"></div>

    <div class="box2"></div>

    <div class="box3"></div>

    <div class="box4"></div>

</body>

</html>

 结论：如果不写该参数或者该参数为0则阴影完全实心，没有模糊效果，并且该值越大阴影越模糊

（3） spread 属性值表示设置的阴影大小（可选）

这个值可以被看作是从元素到阴影的距离

<!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>

        div{

            margin: 20px;

            display: inline-block;

            width: 100px;

            height: 100px;

            background-color: red;

        }

        .box1{

            /* spread为0（默认值） */

            box-shadow: 0px 0px 10px 0px blue;

        }

        .box2{

            /* spread为5(正值会在元素的四个方向延伸阴影) */

            box-shadow: 0px 0px 10px 5px blue;

        }

        .box3{

            /* spread为-1(负值会使阴影变得比元素本身尺寸还要小) */

            box-shadow: 0px 0px 10px -1px blue;

        }

    </style>

</head>

<body>

    <div class="box1"></div>

    <div class="box2"></div>

    <div class="box3"></div>

</body>

</html>

结论：

  • 默认值“0”会让阴影变得得和元素的大小一样（无设置）
  • 正值会在元素的四个方向延伸阴影
  • 负值会使阴影变得比元素本身尺寸还要小

（4） color 属性值指定阴影的颜色

<!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>

        div{

            margin: 20px;

            display: inline-block;

            width: 100px;

            height: 100px;

            background-color: red;

        }

        .box1{

            /* color值表示阴影颜色 */

            box-shadow: 0px 0px 10px 5px blue;

        }

        .box2{

            box-shadow: 0px 0px 10px 5px green;

        }

        .box3{

            box-shadow: 0px 0px 10px 5px orange;

        }

    </style>

</head>

<body>

    <div class="box1"></div>

    <div class="box2"></div>

    <div class="box3"></div>

</body>

</html>

（5）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>

        div{

            margin: 20px;

            display: inline-block;

            width: 100px;

            height: 100px;

            background-color: red;

        }

        .box1{

            box-shadow: 0px 0px 10px 5px blue;

        }

        .box2{

             /* inset设置阴影为内侧阴影 */

            box-shadow: 0px 0px 10px 5px blue inset;

        }

    </style>

</head>

<body>

    <div class="box1"></div>

    <div class="box2"></div>

</body>

</html>

至此，box-shadow盒子阴影属性已经介绍完毕

box-shadow(盒子阴影)的更多相关文章

  1. 盒子显隐，伪类边框，盒子阴影,2d平面形变

    -盒子显隐 显隐的盒子尽量不影响其他盒子的布局 display:none; 消失的时候不占位置,显示的时候占位 opacity:0-1; 盒子透明度 overflow: hidden; 超出部分隐藏 ...

  2. 字体图标,盒子显隐,overflow属性,伪类设计边框,盒子阴影2d形变

    字体图标 ''' fa框架: http://fontawesome.dashgame.com/ 下载 => 引入css文件 引入字体图标库 <link rel="styleshe ...

  3. Shadow Map阴影贴图技术之探 【转】

    这两天勉勉强强把一个shadowmap的demo做出来了.参考资料多,苦头可不少.Shadow Map技术是目前与Shadow Volume技术并行的传统阴影渲染技术,而且在游戏领域可谓占很大优势.本 ...

  4. 前端,字体图标,盒子显隐,2d形变,盒子阴影

    ---恢复内容开始--- 字体图标 1.将font-awesome-4.7.0文件夹放入项目内 2.在html head中连接 3.在body中导入 盒子显隐 1.使用高度显隐 <p>-- ...

  5. 盒子阴影 box-shadow

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. Box Model 盒子模型

    Box Model盒子模型,是初学者在学习HTMl5时会学到的一个重要的模型,也有一些人称它为框模型,因为盒子是属于3维,而框是平面的.称之为盒子模型,是因为其结构和盒子十分相似,其最外面是margi ...

  7. 第50天学习打卡（CSS 圆角边框 盒子阴影 定位）

    4.4圆角边框 圆角边框:  <!DOCTYPE html> <html lang="en"> <head>     <meta char ...

  8. CSS第四天总结 更多的属性 圆角 边框图片 段落属性 颜色渐变 盒子阴影

    圆角边框: border-radius    一个值时表示四个角用的圆半径,4个值时分别是左上角.右上角.左下角.右下角,单位可以是px和百分比,百分比是半径相对于边框长度的比例 在CSS3中我们终于 ...

  9. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

随机推荐

  1. [gym102769L]Lost Temple

    考虑第$i$列的答案,即找到一个区间$[l,r]$,使得: 1.$l$和$r$要同奇偶,令$ans=\frac{r-l}{2}$,要求尽量大($ans+1$即为该列答案) 2.$\forall 0\l ...

  2. [noi38]游戏

    用线段数维护一段区间内的两个信息:1.需要多少经验就可以让有一个人升级,2.等级和.单点修改直接暴力做就可以,区间修改考虑如果这个区间不会产生升级就不递归下去而是打上懒标记. 考虑这个算法的时间复杂度 ...

  3. [bzoj1415]聪聪与可可

    直接求出任意两点的距离后记忆化搜索,用f[i][j]表示聪聪在i,可可在j的期望步数,由于i和j的最短路单调递减,所以搜不到环 1 #include<bits/stdc++.h> 2 us ...

  4. JDK源码阅读(7)：ConcurrentHashMap类阅读笔记

    ConcurrentHashMap public class ConcurrentHashMap<K,V> extends AbstractMap<K,V> implement ...

  5. Codeforces 985G - Team Players（三元环）

    Codeforces 题目传送门 & 洛谷题目传送门 真·ycx 做啥题我就做啥题 考虑枚举 \(j\),我们预处理出 \(c1_i\) 表示与 \(i\) 相连的编号 \(<i\) 的 ...

  6. 51nod 1355 - 斐波那契的最小公倍数（Min-Max 容斥+莫比乌斯反演）

    vjudge 题面传送门 首先我们知道斐波那契数列的 lcm 是不太容易计算的,但是它们的 gcd 非常容易计算--\(\gcd(f_x,f_y)=f_{\gcd(x,y)}\),该性质已在我的这篇博 ...

  7. 使用CNVnator分析动植物群体拷贝数变异CNV

    目录 1.安装 2.测试 3.动植物群体检测CNV 知名的拷贝数变异分析工具几乎都是为人类变异检测开发,对于动植物重测序分析有些尴尬.不过好在植物群体研究不必那么精细,用同样的工具也可做分析. 地址: ...

  8. [Ocean Modelling for Begineers] Ch5. 2D Shallow-Water Modelling

    本章利用二维浅水模型研究表面重力波的不同物理过程,如湖水中风驱动流体,正压不稳定机制(?the barotropic instability mechanism).本章将为读者介绍使用不同的对流格式模 ...

  9. 睡眠或者重启windows，无法ssh连接或者pingVMware的虚机

    睡眠后无法直接ssh重连VMware主机问题 这个问题我在win8上出现过,win10看了下同事可以正常连,不知道其他有没有问题. 解决方法: 1.关闭vmnet8和vmnet0里面的 npcap 功 ...

  10. SpringBoot整合Shiro 一：搭建环境

    Java项目的安全框架一般使用 shiro 与 spring security 具体怎么选择可以参考文章:安全框架 Shiro 和 Spring Security 如何选择 我这里选择使用Shiro ...