box-shadow：inset 横向偏移量  纵向偏移量  模糊范围  扩展范围  阴影颜色；

　　　　1.inset ：（可选） 内阴影，不设置inset，表示盒子外部显示一个投影。也可写在最后。

　　　　2.横向偏移量：（必选） 设置为正值，表示阴影相对盒子向右偏移。负值表示阴影相对盒子向左偏移

　　　　3.纵向偏移量：（必选）设置正值，表示阴影相对盒子向下偏移，反之则相反。

　　　　4.模糊范围（可选）：值越大，阴影模糊范围越大，颜色越浅。

　　　　5.扩展范围（可选）：值越小，阴影尺寸越小，值越大，阴影尺寸就越大。

　　　　6.阴影颜色：（可选）默认是黑色。

同时设置多个阴影：

　　可以用逗号将多个box-shadow属性的值分开

　　　　box-shadow： 2px 2px 5px orange，inset 2px 2px 5px green；

CSS阴影盒子的更多相关文章

  1. 认识CSS中盒子模型

    前端之HTML,CSS(六) CSS 盒子模型 CSS中的重点,理解盒子模型对于CSS才能有更清晰的认识.网页说简单一点其实就是一块一块的拼接出来的,可以想象成拼图,所有图块拼接在一起就成了一幅图像. ...

  2. div垂直居中 css div盒子上下垂直居中

    div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...

  3. 你所不知道的 CSS 阴影技巧与细节

    关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow 的用法. 最近一个新的项目,CSS-Ins ...

  4. 深入理解CSS系列（一）：理解CSS的盒子模型

    接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...

  5. 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）

    这些HTML.CSS知识点,面试和平时开发都需要 No1-No4   系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...

  6. 使用css弹性盒子模型

    提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...

  7. 你所不知道的 CSS 阴影技巧与细节 滚动视差？CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

  8. #CSS的盒子模型、元素类型

    CSS的盒子模型.元素类型   本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...

  9. 深入了解CSS中盒子模型

    CSS中盒子模型介绍 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什 ...

随机推荐

  1. Office - Outlook

    将邮件存到本地 服务器容量有限,避免丢失和经常提示容量不足 步骤 在File->Account Settings->Account Settings下面 在Data Files标签页新建一 ...

  2. c# 协变与抗变

    定义 协变:与原始类型转换方向相同的可变性称为协变. 抗变:与派生类型转换方向相同的可变性称为抗变. 补充: 参数是协变的,可以使用派生类对象传入需要基类参数的方法,反之不行 返回值是抗变的,不能使用 ...

  3. day 69 ORM 多表增删改查操作

    http://www.cnblogs.com/liwenzhou/p/8660826.html 下面的代码是在 python console中配置的. 关闭pycharm会消失. from app01 ...

  4. openstack 实用命令

    port 1.创建port(create) i.随机ip openstack port create --network public --fixed-ip subnet=sub-public '' ...

  5. 940. Distinct Subsequences II

    Given a string S, count the number of distinct, non-empty subsequences of S . Since the result may b ...

  6. 通过修改EIP寄存器实现32位程序的DLL注入

    功能:通过修改EIP寄存器实现32位程序的DLL注入 <如果是64位 记得自己对应修改汇编代码部分> 原理:挂起目标进程,停止目标进程EIP的变换,在目标进程开启空间,然后把相关的指令机器 ...

  7. jzoj5864

    本來這道題該100的,沒想到考試沒想最短路,直接跑暴力了 實際上這道題有原題跳樓機 那道題在模x的意義下統計答案 現在,我們要統計n個數的答案 30pts為提高組原題 剩下70pts,可以記dis[i ...

  8. [小tips]使用vscode，根据vue模板文件生成代码

    本着苍蝇虽小也是肉的精神...... 目标: 我们希望每次新建.vue文件后,VSCODE能够根据配置,自动生成我们想要的内容. 方法: 打开VSCODE编辑器,依次选择"文件 -> ...

  9. Python小白学习之路（六）—— 【元祖】【元祖相关功能】

    元祖 tu = (111,'alex',(11,['aa','xhg',(78,43)],'aaa'),789,) 通过这个例子,我们看到元祖的特征: 是通过括号()括起来的 一般写元祖的时候,推荐子 ...

  10. 微信小程序云函数 添加数据到数据库

    1.新建小程序,建立云开发快速启动模板 这里和普通小程序的区别有三点 一是 project.config.json写上云函数所在目录"cloudfunctionRoot": &qu ...