CSS 样式属性锦集

ul#nav > Li 只有一个大于号，是指应用了#nav这个ID的下一级元素的儿子辈Li 元素定义的内容符合这个CSS代码定义的样式，但是孙子辈Li元素定义的内容就不符合这个CSS代码样式了，例如：
<ul id="nav">
    <li>儿子辈元素符合CSS代码样式</li>
    <ul>
       <li>孙子辈元素不符合CSS代码样式</li>
    </ul>
</ul>

ul#nav > Li >a同时使两个大于号，是指a 必须是Li 的儿子辈，而Li 必须是<div id="nav">的儿子辈，这样a 才符合CSS代码定义的样式，例如:

<ul id="nav">
<li><a></a></li>
<li><a></a></li>
</ul>

text-shadow: 0 -0.083em 0 rgba(0,0,0,0.25);
text-shadow: h-shadow v-shadow blur color;文本阴影:水平阴影位置,垂直阴影位置,模糊距离,阴影颜色rgb是颜色a是透明度

box-shadow:none|shadow

它的值包括 6 个参数：阴影类型，X轴位移，Y轴位移，阴影大小，阴影扩展和阴影颜色。此 6 个参数可以有选择地省略。

浏览器兼容性

Webkit支持：-webkit-box-shadow

Mozilla支持：-moz-box-shadow

IE9支持：box-shadow

IE8及以前：不支持

实用实例

简单效果:

img{  height:300px;  -moz-box-shadow:5px 5px;  -webkit-box-shadow:5px 5px;   box-shadow:5px 5px;}

虚阴影效果:

img{ height:300px;  -moz-box-shadow:2px 2px 10px #06c;  -webkit-box-shadow:2px 2px 10px #06c; box-shadow:2px 2px 10px #06c;}

渐变阴影效果:

img{  height:300px; -moz-box-shadow:0 0 10px #06c; -webkit-box-shadow:0 0 10px #06c; box-shadow:0 0 10px #06c;}

带光晕效果

img{ height:300px; -moz-box-shadow:0 0 10px 10px #06c; -webkit-box-shadow:0 0 10px 10px #06c; box-shadow:0 0 10px 10px #06c;}

内阴影效果

img{ height:300px; -moz-box-shadow:inset 5px 5px 10px #06c; -webkit-box-shadow: inset 5px 5px 10px #06c; box-shadow: inset 5px 5px 10px #06c;

}

彩色阴影

img{  height:300px;  -moz-box-shadow:0 0 10px red, 2px 2px 10px 10px yellow, 4px 4px 12px 12px green;

       -webkit-box-shadow:0 0 10px red,  2px 2px 10px 10px yellow,4px 4px 12px 12px green;

     box-shadow:0 0 10px red,  2px 2px 10px 10px yellow,  4px 4px 12px 12px green;}