• 在设计草案中有很多元素有阴影,在没有CSS3的情况下,我们处理阴影是以图片的形式来处理,或者用js来控制,与js脚本相比,png格式的图像是处理阴影的最好方法, [详细]

CSS3阴影治疗

发布时间:2020-08-25 20:46:44

在设计草案中有很多元素有阴影,在没有CSS3的情况下,我们处理阴影是以图片的形式来处理,或者用js来控制,与js脚本相比,png格式的图像是处理阴影的最好方法,尤其是对于一些细节的地方,效果最好。相反,在使用图片处理阴影时存在一些问题。1,图片的大小,2,修改的困难,所以阴影样式被添加到css3的新版本:框影中。

我们通常的写作方式:框影:016px48px0#e2e4ee

CSS3阴影的具体设置:.box-阴影{//Firefox4.0-Moz-box-阴影:投影模式x轴偏移y轴偏移阴影模糊半径阴影扩展半径阴影颜色;//Safariandgooglechrome10.0-webkit-box-阴影:投影模式x轴偏移y轴偏移阴影模糊半径阴影扩展半径阴影颜色//fifox4.0+,googlechrome10.0+,oprea10.5+andie9box-阴影:投影模式x轴偏移y轴偏移阴影扩展半径阴影颜色

阴影设置的另一个特别之处在于,颜色可以设置透明度。写页面的朋友会注意到有两种主要的方式来写阴影:

框-阴影:016px48px0#e2e4ee

框影:0px10px20pxrgba(2,48,76,0.05)

最大的区别是颜色设置上的差异;一种是颜色十六进制的方式,另一种是RGB的颜色方式;我们也可以在RGB的颜色之后增加透明度,这对颜色来说特别方便。