box-shadow详解
1.box-shadow属性语法
box-shadow 属性接受值最多由五个不同的部分组成。
box-shadow: offset-x offset-y blur spread color position;
换句说: 对象选择器 {box-shadow:X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式 }
不像其它的属性,比如 border,它们的接受值可以被拆分为一系列子属性,box-shadow 属性没有子属性。这意味着记住这些组成部分的顺序更加重要,尤其是那些长度值。
2.offset-x
第一个长度值指明了阴影水平方向的偏移,即阴影在 x 轴的位置。值为正数时,阴影在元素的右侧;值为负数时,阴影在元素的左侧。
CSS
.left { box-shadow: 20px 0px 10px 0px rgba(0,0,0,0.5) }
.right { box-shadow: -20px 0px 10px 0px rgba(0,0,0,0.5) }
3.offset-y
第二个长度值指明了阴影竖直方向的偏移,即阴影在 y 轴的位置。值为正数时,阴影在元素的下方;值为负数时,阴影在元素的上方。
.left { box-shadow: 0px 20px 10px 0px rgba(0,0,0,0.5) }
.right { box-shadow: 0px -20px 10px 0px rgba(0,0,0,0.5) }
4.blur
第三个长度值代表了阴影的模糊半径,举例来说,就是你在设计软件中使用 高斯模糊 滤波器带来的效果。值为 0 意味着该阴影是固态而锋利的,完全完全没有模糊效果。blur 值越大,阴影则更不锋利而更朦胧 / 模糊。负值是不合法的,会被修正成 0。
.left { box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5) }
.middle { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) }
.right { box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5) }
5.spread
第四个长度代表了阴影扩展半径,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值是,则缩小。前提是存在阴影模糊半径。
.left { box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5) }
.middle { box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.5) }
.right { box-shadow: 0px 0px 50px 50px rgba(0,0,0,0.5) }
6.color
color 部分的值正如你所预料的,是指阴影的颜色。它可以是任意的颜色单元 (见 在 CSS 中与颜色打交道)。
.left { box-shadow: 0px 0px 20px 10px #67b3dd }
.right { box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.5) }
7.position
此参数是一个可选值,如果不设值,其默认的投影方式是外阴影;
如果取其唯一值“inset”,就是将外阴影变成内阴影,也就是说设置阴影类型为“inset”时,其投影就是内阴影。
.left { box-shadow: 0px 0px 20px 10px #67b3dd }
.right { box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.5) inset}
box-shadow详解相关推荐
- Bounding box regression详解
Bounding box regression详解 转载 http://blog.csdn.net/u011534057/article/details/51235964 Reference link ...
- Linux /etc/passwd和etc/shadow 详解
Linux /etc/passwd 内容 Linux 系统中的 /etc/passwd 文件,是系统用户配置文件,存储了系统中所有用户的基本信息,并且所有用户都可以对此文件执行读操作. [root@l ...
- /etc/passwd /etc/shadow 详解
1,passwd文件 passwd文件存放在/etc目录下.这个文件存放着所有用户帐号的信息,包括用户名和密码,因此,它对系统来说是至关重要的.可以使用如下命令查看该文件:cat /etc/passw ...
- 【转载】/etc/passwd /etc/shadow 详解
转载自:http://blog.csdn.net/snlying/article/details/6130468 1,passwd文件 passwd文件存放在/etc目录下.这个文件存放着所有用户帐号 ...
- MNS、IOU、bounding box regression详解
IOU 非极大值抑制(MNS) 边框回归(bounding box regression)
- Out of the box 意思详解
1)"Out of box"用于描述某种不确定的事件.常常作为副词来形容某种观点的不确定性.据说这个词同20世纪早期的英国数学家亨利?恩斯特?杜德耐解答一个著名数学谜语的思路相关. ...
- 用户配置文件/etc/passwd和密码配置文件/etc/shadow详解
一,用户配置文件和密码配置文件 认识/etc/passwd和/etc/shadow 这两个文件可以说是Linux系统中最重要的文件之一.如果没有这两个文件或者这两个文件出了问题,则无法正常登录系统. ...
- [转]边框回归(Bounding Box Regression)详解
https://blog.csdn.net/zijin0802034/article/details/77685438 Bounding-Box regression 最近一直看检测有关的Paper, ...
- 边框回归(Bounding Box Regression)详解
Bounding-Box regression 最近一直在看目标检测有关的Paper, 从rcnn, fast rcnn, faster rcnn, yolo, r-fcn, ssd,到今年cvpr最 ...
- CNN目标检测(一):Faster RCNN详解
↑↑↑↑目录在这里↑↑↑↑↑ Faster RCNN github : https://github.com/rbgirshick/py-faster-rcnn Faster RCNN paper : ...
最新文章
- 黑马vue---1-7、vue杂记
- eclipse下使用maven配置库托管jar包
- 中文数据集有奖公开征集
- css div里引用em字体会变斜体_前端开发中7种必要了解的CSS长度单位
- Qt-捕获Windows消息
- 【Office Word】论文排版有关技巧
- linux下mysql数据的导出和导入
- Springboot2.2.6中的RSocket使用, RSocket 进行反应式数据传输
- gin框架-1请求参数的示例:
- leetcode数组汇总_LeetCode刷题实战74:搜索二维矩阵
- php怎么使用类库,如何使用 Composer 引用类库
- Viusal 各个版本离线镜像
- 69期-Java SE-035_MySQL-6 存储过程、SQL练习 -doing
- MySQL cluster集群/NDB集群学习
- 【AD】Altium Designer 新建一个项目
- Linux内核固定虚拟地址映射
- 计算机视觉中文核心期刊
- SKYCC组合营销软件的特色
- java票证管理办法_java – 从Authorization标头中的Kerberos票证中读取用户名
- 人工智能未来发展机遇与挑战并存
热门文章
- 580刷590bios_身价瞬间涨几百 RX 480刷bios变身RX 580
- xp系统打开计算机硬盘分区,详解WindowsXP硬盘分区步骤
- 使用 Love2D 开发游戏
- SAS计算IV代码分享
- 光纤传输技术——光器件(三)
- mysql时区time_zone和sytem_time_zone
- 数据分析之数据透视表(Office2019)
- MTF、Resolution、Contrast解读
- html ul做成表格,HTML+CSS入门 ul打造表格样式解析
- 微信小程序识别图片并提取文字_微信小程序图片上传(文字识别)