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，然后设置模糊距离和阴影尺寸！

水平阴影和垂直阴影是必须要的，不可缺少！

转载于:https://www.cnblogs.com/chakson/p/4725107.html

CSS3盒子阴影box-shadow相关推荐

（24）css3盒子阴影
1.边框阴影在 CSS3 中,box-shadow 属性用于对盒子边框添加阴影. 2.边框阴影语法 box-shadow 属性向盒子添加阴影,属性值有2-4 个长度值.可选的颜色值以及可选的 in ...
Box Shadow阴影和圆角
一.盒子写Box Shadow阴影:如 box-shadow:2px 2px 5px #120F0B; //支持Opera浏览器 -moz-box-shadow:2px 2px 5px #120F0B ...
html字体投影效果,IE10中的CSS3文字阴影（text-shadow）属性
IE10浏览器在Windows开发者预览版中引入了支持硬件加速的CSS3文字阴影(text - shadow)属性.文字阴影是Web开发中最重要的需求功能之一.它使得以前在标准中难以实现的文字效果以更 ...
Box Shadow(阴影)-Css3写法示例
Box Shadow(阴影)-Css3演示 -moz-box-shadow:2px 2px 5px #333333; -webkit-box-shadow:2px 2px 5px #333333; b ...
Shadow属性和【CSS3 Box Shadow(阴影)效果在线调试工具】
Shadow属性示例向内/向外 | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 inset 阴影向内 (默认向外) /* x偏移量 | y偏移量 | 阴影颜色 */ b ...
CSS3 Box Shadow
语法: box-shadow:1px 2px 3px #FFF; box-shadow:阴影水平偏移值(可取正负值): 阴影垂直偏移值(可取正负值):阴影模糊值:阴影颜色: 兼容性 Firefox支持 ...
html中投影效果图,利用CSS3（box shadow）制作边框投影
应用CSS3的box shadow属性,可以直接在页面中使用投影,增加页面的立体效果. 最终效果预览 HTML 代码: CSS3 Box shadow 任鸟飞网页设计是一个关注于网页设计及网站开发.图 ...
html5调盒子边框大小,CSS3 - 盒子大小(CSS3 - Box Sizing)
CSS3 - 盒子大小(CSS3 - Box Sizing) Box大小调整属性用于更改元素的高度和宽度. 从css2开始,box属性的工作方式如下所示 -width + padding + bord ...
html盒子阴影效果,CSS3给div或者文字添加阴影（盒子阴影、文本阴影的使用）
添加阴影效果以前只能使用图片来实现了,现在的css3功能非常的强大了,今天我们就一起来看关于CSS3给div或者文字添加阴影(盒子阴影.文本阴影的使用)的方法,具体的例子如下所示． CSS3定义了两种 ...

CSS3盒子阴影box-shadow

CSS3盒子阴影box-shadow相关推荐

最新文章

热门文章