CSS3盒子阴影box-shadow
来自W3CSchool的解释
语法:
box-shadow: h-shadow v-shadow blur spread color inset;
注释:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊距离。 |
spread | 可选。阴影的尺寸。 |
color | 可选。阴影的颜色。请参阅 CSS 颜色值。 |
inset | 可选。将外部阴影 (outset) 改为内部阴影。 |
example
1、 box-shadow:10px 10px black;
2、 box-shadow:10px -10px black;
3、 box-shadow:10px 0px black;
4、 box-shadow:0px 0px 10px 10px black;
Tip:右下阴影为正方向,前3个例子中,水平方向的阴影为10px,所以右侧阴影一直有10px,而垂直方向阴影>0(正方向,下侧有阴影),=0(垂直方向无阴影),<0(负方向,上侧有阴影)。若垂直方向数值固定,水平方向变化也同理!
要想四边都有阴影,水平垂直阴影大小设置为0,然后设置模糊距离和阴影尺寸!
水平阴影和垂直阴影是必须要的,不可缺少!
CSS3盒子阴影box-shadow的更多相关文章
- CSS3 - 盒子的 box - size
两个参数: border-box和content-box <!DOCTYPE html> <html lang="en"> <head> < ...
- 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...
- css3圆角矩形、盒子阴影
css3圆角矩形 div{ width: 200px; height: 200px; border: #f00 solid 1px; margin-bottom: 10px; } 1.设置 borde ...
- CSS3 --添加阴影(盒子阴影、文本阴影的使用)
CSS3 - 给div或者文字添加阴影(盒子阴影.文本阴影的使用)CSS3定义了两种阴影:盒子阴影和文本阴影.其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本.下面分别介绍两种 ...
- Westciv Tools主要为CSS3提供了渐变gradients、盒子阴影box-shadow、变形transform和文字描边四种在线生成效果的工具
Westciv Tools主要为CSS3提供了渐变gradients.盒子阴影box-shadow.变形transform和文字描边四种在线生成效果的工具 1.Westciv Tools 彩蛋爆料直击 ...
- CSS3 弹性盒子(Flex Box)
1 CSS3 弹性盒子(Flex Box) 1 http://caniuse.com/#search=flex%20box https://www.w3.org/TR/css-flexbox-1/ C ...
- css3新增(圆角边框(border-radius),盒子阴影(box-shadow),文字阴影(text-shadow),背景缩放(background-size))
1.圆角边框 border-radius border-radius 属性用于设置元素的外边框圆角 语法:border-radius:length; 参数值可以是数值 或者 百分比 的形式 正方形, ...
- CSS3之阴影
CSS3中新增属性-阴影,可以做出很多漂亮的效果. 文字阴影text-shadow text-shadow属性值的顺序: text-shadow: h-shadow v-shadow blur col ...
- CSS第四天总结 更多的属性 圆角 边框图片 段落属性 颜色渐变 盒子阴影
圆角边框: border-radius 一个值时表示四个角用的圆半径,4个值时分别是左上角.右上角.左下角.右下角,单位可以是px和百分比,百分比是半径相对于边框长度的比例 在CSS3中我们终于 ...
随机推荐
- 【C# 小窍门】WeakEventManager 无法识别!ErrorCS0246The type or namespace name 'WeakEventManager' could not be found
WeakEventManager 想用一下这个,在学习C# 事件的时候,结果添加了Using System.Windows, WeakEventManager却一直是红色的,无法识别,报这个错哦~ 好 ...
- FreeBSD network connect
在安装FreeBSD的过程中,网络设置部分我将其设置为DHCP,在此期间,下载了en_us_freebsd_hanbook.txzen_us_freebsd_hanbook.txz,zh_cn_fre ...
- ASPX.Net控件
简单控件 Label :显示文字,编译后的元素的为span 主要设置属性边框包括边框颜色,边框样式,边框粗细 Liteal :显示文字,编译后不会产生任何元素,一般用来从后台输出JS代码 Textbo ...
- 今天学了递归,感觉好复杂啊/(ㄒoㄒ)/~~
honio塔思路: 第一步 把A上的n-1个圆盘借助C移到B上: 第二步 把A上的一个圆盘移到C上: 第三步 把B上的n-1个圆盘借助A移到C上. 这显然符合递归的两个条件: ①具备边界条件:只有1个 ...
- github add
https://github.com/oldbeer/test/tree/master
- OO Design
什么是设计原则? 设计原则是基本的工具,应用这些规则可以使你的代码更加灵活.更容易维护.更容易扩展.基本原则:封装变化Encapsulate what varies.面向接口变成而不是实现 Code ...
- centos 配置 ssl服务
使用的是appach 2.4.10 版本 各个版本配置不同 1.首先修改httpd.conf 文件 appach 安装目录下的 conf文件夹中找到 #LoadModule socache_shmcb ...
- MaxScale:实现MySQL读写分离与负载均衡的中间件利器
1. MaxScale 是干什么的? 配置好了 MySQL 的主从复制结构后,我们希望实现读写分离,把读操作分散到从服务器中,并且对多个从服务器能实现负载均衡. 读写分离和负载均衡 是MySQL集群的 ...
- 07-阻塞赋值与非阻塞赋值原理分析——小梅哥FPGA设计思想与验证方法视频教程配套文档
芯航线--普利斯队长精心奉献 实验目的:掌握阻塞赋值与非阻塞赋值的区别 实验平台:无 实验原理: 阻塞赋值,操作符为"=","阻塞"是指在进程语句( ...
- 对C++虚函数的理解
关于类不断被继承的过程,从整体上看,是一个从抽象到逐渐具体化的过程,基类可以是非常非常抽象的东西,而最终实例化的派生类就非常具体了. 虚函数的意义,就在于定义了一个从最早的基类到最终的派生类都可能会用 ...