由Google搜索页引发对box-shadow的使用和技巧总结

由Google搜索页引发对box-shadow的使用和技巧总结



          CSS3的box-shadow有点类似于text-shadow,只不过不同的是text-shadow是对象的文本设置阴影,而box-shadow是给对象实现图层阴影效果。

 

text-shadow demo:

语法:

text-shadow: h-shadow v-shadow blur color;
描述
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。参阅 CSS 颜色值

1、

h1 {
text-shadow: 5px 5px 5px #FF0000;
}

1
2
3
4
5
6
7
<h1>文本阴影效果!</h1>
 

 

box-shadow demo:

 

语法:

 

box-shadow: h-shadow v-shadow blur spread color inset;

 

描述
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。

 

1、

 

-moz-box-shadow:2px 2px 5px #333333; -webkit-box-shadow:2px 2px 5px #333333; box-shadow:2px 2px 5px #333333;

 

由Google搜索页引发对box-shadow的使用和技巧总结

 

2、向 div 元素添加 box-shadow:

 

div
{
width:300px;
height:100px;
background-color:#ff9900;
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
}

 

 

 

test

 

 

 

由Google搜索页引发对box-shadow的使用和技巧总结

 

3、

 

box-shadow:5px 5px 5px #999 inset; 

 

由Google搜索页引发对box-shadow的使用和技巧总结

 

4、

 

box-shadow:-5px -5px 5px #999 inset; 

 

由Google搜索页引发对box-shadow的使用和技巧总结

 

 

 


上一篇:《嵌入式设备驱动开发精解》——第1章 关于本教程 1.1 本书内容的组织


下一篇:关于 SAP Fiori Elements 应用标题属性(title) 的复制逻辑单步调试