box-shadow阴影详解

每次使用box-shadow,都要查阅资料才能实现对应的效果,现在总结一下,方便以后查看。

使用语法:

  element{box-shadow: inset x-offset y-offset blur-radius spread-radius color};

  element{box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色};

属性值的设置:

   1. 投影方式:此参数可选,默认的投影方式是外阴影("outset");如果取其唯一值"inset",就是将外阴影变成内阴影;

2.X-offset:是指阴影水平偏移量,其值可正可负,正值,则阴影在对象的右边,负值,阴影在对象的左边,为0时,阴影会同时出现在对象的左边和右边;

3. Y-offset:是指阴影的垂直偏移量,其值也可以是正负值,正值,阴影在对象的底部,负值时,阴影在对象的顶部,为0时,阴影会同时出现在对象的顶部和底部;

4.阴影模糊半径:此参数是可选,只能为正值,如果其值为0时,表示阴影不具有模糊效果,值越大阴影的边缘就越模糊;

5. 阴影扩展半径:此参数可选,其值可为正负值,正值,则整个阴影都延展扩大,反之,则缩小

6. 阴影颜色:此参数可选,不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样,特别是在webkit内核下的safari和chrome浏览器将无色,也就是透明,建议不要省略此参数。

  如果要设置多个方向的阴影只按照要求设置X-offset或者Y-offset的正负值,确定设置的阴影的方向。设置不同方向不同颜色的阴影可以用逗号隔开,如:

/*设置四边不同颜色外阴影*/
  .element{
     box-shadow:-10px 0 10px red, /*左边阴影*/
     10px 0 10px yellow, /*右边阴影*/      
     0 -10px 10px blue, /*顶部阴影*/
     0 10px 10px green; /*底边阴影*/
}

效果如下:

/*在元素四周叠加不同颜色阴影*/

.element{

     box-shadow:0 0 10px 5px black, 
     0 0 10px 20px red;
}

效果如下:

  

时间: 2024-11-14 13:03:44

box-shadow阴影详解的相关文章

/etc/shadow文件详解

/etc/shadow文件是用于存放用户密码的,以密文形式存储.下面将详细介绍该文件. [[email protected] ~]# ls -l /etc/shadow #查看文件的详细信息 ---------- 1 root root 908 12月 14 18:20 /etc/shadow [[email protected] ~]# cat /etc/shadow #查看文件的内容 root:$6$UxT.2KHv$Z/tIQGuvGwaa/kvgNj7GpAw5lENtb.sas77yj

linux /etc/shadow文件详解

struct spwd { char *sp_namp; /* user login name */ char *sp_pwdp; /* encrypted password */ long int sp_lstchg; /* last password change */ long int sp_min; /* days until change allowed. */ long int sp_max; /* days before change required */ long int sp

Shadow SSDT详解、WinDbg查看Shadow SSDT

一.获取ShadowSSDT 好吧,我们已经在R3获取SSDT的原始地址及SDT.SST.KiServiceTbale的关系里面提到:所有的SST都保存在系统服务描述表(SDT)中.系统中一共有两个SDT,一个是ServiceDescriptorTable,另一个是ServiceDescriptorTableShadow.ServiceDescriptor中只有指向KiServiceTable的SST,而ServiceDescriptorTableShadow则包含了所有的两个SST.SSDT是

5、linux用户和组管理详解

linux用户和组管理 类Unix系统的设计初衷就是为让多用户同时工作,所以也迫使Linux系统有了极强的安全性,在前面安装红帽RHEL7操作系统时还特别要求"设置root用户密码",而root用户是存在于所有类UNIX系统中的"超级用户". 用户管理 root账户介绍(超级管理员) root用户拥有极高的系统所有权,能够管理系统的各项功能,如添加/删除用户,启动/关闭进程,开启/禁用硬件设备等权限.虽然使用root用户工作时不会受到权限的控制,但老话讲"

ANDROID L——Material Design详解(视图和阴影)

转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: 昨天凌晨Google刚刚确认Android L就是Android Lollipop(5.0). Google之前就已经提前推出了Android L Developer Preview(开发者预览版)来帮助开发者更快的了解Android特性,而不久前也推出了64位的模拟器镜像,而且首次搭载Android L系统的Nexus 6和 Nexus 9也即将上市. 相信And

Windows渗透利器之Pentest BOX使用详解(一)

内容概览:                                     知识科普                                    优缺点总结 功能参数详解翻译: 控制台参数详解翻译 setting各项功能参数翻译详解: 基本设置(含外观,字体,标签栏等设置) 启动设置(含任务栏其他等) 特征 综合参数 宏设置 文本管理器 基础信息 知识科普: Pentest Box在2015年发布,具体月份不详.Pentest Box开源项目的创始人是Aditya Agrawa

转载 CSS3 经典教程系列:CSS3 盒阴影(box-shadow)详解

目标大纲 文章转载 CSS3 经典教程系列:CSS3 盒阴影(box-shadow)详解 IE中CSS-filter滤镜小知识大全

linux下的/etc/passwd和/etc/shadow详解

linux下的/etc/passwd和/etc/shadow详解一./etc/passwd/etc/passwd 文件是一个纯文本文件,每行采用了相同的格式:name:password:uid:gid:comment:home:shellname 用户登录名password 用户口令.此域中的口令是加密的,常用x表示.当用户登录系统时,系统对输入的口令采取相同的算法,与此域中的内容进行比较.如果此域为空,表明该用户登录时不需要口令.uid 指定用户的 UID.用户登录进系统后,系统通过该值,而不

Linux shadow 和 passwd详解

Passwd 和 Shadow详解 一./etc/passwd/etc/passwd 文件是一个纯文本文件,每行采用了相同的格式: name:password:uid:gid:comment:home:shell name 用户登录名 password 用户口令.此域中的口令是加密的,常用x表示.当用户登录系统时,系统对输入的口令采取相同的算法,与此域中的内容进行比较.如果此域为空,表明该用户登录时不需要口令. uid 指定用户的 UID.用户登录进系统后,系统通过该值,而不是用户名来识别用户.