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. BitAdminCore框架更新日志20180523

    20180523更新内容 本次更新两个内容,一是增加视频处理功能,二是增加定时服务功能. 视频处理 定时服务 BitAdminCore框架,用最少的代码,实现最多的功能 本次新暂未发布,后续有空发布 ...

  2. Navicat 12破解工具 +安装包

    下载地址: https://www.lanzous.com/b657322/ 密码:1j9x zip解压密码:gubin 下载完成 是这样的  先安装第一个  安装完成后 不要打开 ,把第二个复制到安 ...

  3. 点分治&&动态点分治学习笔记

    突然发现网上关于点分和动态点分的教程好像很少……蒟蒻开篇blog记录一下吧……因为这是个大傻逼,可能有很多地方写错,欢迎在下面提出 参考文献:https://www.cnblogs.com/LadyL ...

  4. NPM install 中:-save 、 -save-dev 和 没有--save的情况

    原文地址:https://www.cnblogs.com/limitcode/p/7906447.html npm install moduleName 命令 . 安装模块到项目node_module ...

  5. java解压缩.gz .zip .tar.gz等格式的压缩包方法总结

    1..gz文件是linux下常见的压缩格式.使用 java.util.zip.GZIPInputStream即可,压缩是 java.util.zip.GZIPOutputStream public s ...

  6. Spring中AOP切面编程学习笔记

    注解方式实现aop我们主要分为如下几个步骤: 1.在切面类(为切点服务的类)前用@Aspect注释修饰,声明为一个切面类. 2.用@Pointcut注释声明一个切点,目的是为了告诉切面,谁是它的服务对 ...

  7. Sublime Text 乱码解决(Package Control 和 ConvertToUTF8插件安装)

    Sublime Text的界面正如她的名字sublime一样,充满极客感觉的高大上,而且拥有强大的功能.但是她默认是不支持GBK编码的. 本来安装一个Package Control插件管理,再安装其他 ...

  8. POJ 2248

    #include <iostream> #define MAXN 100 #define min __min using namespace std; int tem[MAXN]; int ...

  9. POJ 1063

    #include <iostream> using namespace std; int main() { //freopen("acm.acm","r&qu ...

  10. 马哥Python 开发9期

    LVS工作模式: 传输层 会话保持:负载均衡(1) session sticky:同一用户调度固定服务器Source IP:LVS sh算法(对某一特定服务而言)Cookie(2) session r ...