首页 > 新闻资讯 > CSS参数box-shadow(盒阴影)的各种扩散方法

CSS参数box-shadow(盒阴影)的各种扩散方法

0条评论
标签:
更多

box-shadow这个属性应用的非常普遍,可以使你的元素立刻变得漂亮起来,只是记得不要把值设得太离谱。

box-shadow的四个参数:

  x-offset   x轴偏移
  y-offset   y轴偏移
  blur   模糊值
 color of shadow    阴影颜色

浏览器参照基准:Firefox4 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53 and Later, IE9.0 and Later 

#box-shadow{
	-moz-box-shadow:5px 5px 5px #999 inset;               /* For Firefox3.6+ */
	-webkit-box-shadow:5px 5px 5px #999 inset;            /* For Chrome5+, Safari5+ */
	box-shadow:5px 5px 5px #999 inset;                    /* For Latest Opera */
}

下面来看一些例子:

 

常量 box-shadow(盒阴影)

box-shadow: 0 0 10px #555
朴素(旧式)盒阴影
box-shadow: 0 0 10px 10px #555
添加spread参数(扩散值)
box-shadow: 0 0 10px -10px #555
spread参数=>过多负值 => 无阴影

仅页面底部呈现盒阴影效果

box-shadow: 0 10px 10px #555
常规盒阴影 显示在底部
box-shadow: 0 10px 10px -10px #555
负值spread参数 可避免页面两边产生模糊现象
box-shadow: inset 0 -10px 10px -10px #555
inset参数(阴影朝里扩散)也起作用

inset参数和多重阴影

box-shadow: inset 0 0 10px #555
常规inset参数
box-shadow: inset 0 0 10px -10px #555
负值spread参数 和inset参数同时使用
box-shadow: inset 0 -20px 10px -4px #555,
inset -20px 0px 10px -8px #555,
inset 0 20px 10px -16px #555,
inset 20px 0px 10px -16px #555
多重box-shadows , 使用了不同spreads参数值

box-shadow的小拓展应用

box-shadow: 0 5px 10px 20px #fff,
0 20px 20px 10px #aaa
:hover
box-shadow: 0 -15px 5px 15px #fff,
0 -4px 10px 5px #555
box-shadow: 0 0 100px -30px #555
box-shadow: 0 0 1px 2px purple,
0 0 1px 4px blue,
0 0 1px 6px green,
0 0 1px 8px yellow,
0 0 1px 10px orange,
0 0 1px 12px red;

 

 

* 版权声明:作者WordPress啦! 转载请注明出处。