(box-shadow)阴影 -CSS3 注：外阴影

注：阴影有多种书写方法，属性可分开书写，也可写成符合样式

 

简介：CSS3是 CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

 

兼容问题：因为是CSS3的升级版本，所以所写代码会存在兼容性问题，由于浏览器有很多，版本也各有差异，用不同的浏览器必须注意处理其出现的的问题。不过用chrome（谷歌）、firefox（火狐）等基本不会出现兼容性问题，可放心使用。

 

加阴影的属性：box-shadow

 

属性值书写方式：box-shadow：1px(水平位移） 2px（垂直位移） 3px（模糊半径） #ffffff（阴影颜色）

 

 水平位移：水平位移数值为零时，水平方向没有阴影存在，即左右不存在阴影；
         水平位移数值为正值时，水平方向有阴影存在，阴影在右侧显示；
         水平位移数值为负值时，水平方向有阴影存在，阴影在左侧显示；

 垂直位移：水平位移数值为零时，水平方向没有阴影存在，即上下不存在阴影；
         水平位移数值为正值时，水平方向有阴影存在，阴影在下方显示 
         水平位移数值为负值时，水平方向有阴影存在，阴影在上方显示；

 模糊半径：指阴影平铺的距离，即当前阴影存在多少区域内;
         阴影区域越大阴影显示的越淡；
         阴影区域越小阴影显示的越重；

 

 

 

 

 

练习、熟悉：可在百度搜索css3 的box-shadow阴影模拟器进行模拟。