原标题:css3高级的box-shadow阴影效果
自从CSS3出来以后,各种炫酷的效果就出现了。box-shadow属性是用来创建阴影效果的。
介绍一下它的各个参数吧。
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow:必填项,表示水平(即X轴)阴影的位置。正值使阴影出现在元素的右边,负值出现在元素的左边。
v-shadow:必填项,表示垂直(即Y轴)阴影的位置。正值使阴影出现在元素的下边,负值出现在元素的上边。
blur: 可选,表示模糊距离。模糊数值越大,尖锐度越小,阴影越朦胧和模糊。负值是不被允许的,并会被处理成0。
spread :可选,表示阴影的尺寸。可以理解为从元素到阴影的距离。正值会让阴影向各个方向按照指定的数值延伸。负值会让阴影收缩得比元素本身尺寸更小。
color :可选,表示阴影的颜色。这个不需要我多说了吧,想必大家都会。
inset:可选。将外部阴影 (outset) 改为内部阴影。默认为outset
下面可以灵活的运用这个属性了。这里介绍下不常见的效果。
利用阴影显示向上浮动效果。
原理就是在元素下边增加一个阴影,鼠标移上去的时候让阴影缩小,并让元素往上移!
如下:
原始状态
鼠标经过后
实现代码如下:
html:
css:
责任编辑: