原标题: css3高级盒子-关机效果
自从CSS3问世以来,出现了各种酷炫的效果。 box-shadow属性用于创建阴影效果。
下面介绍一下其中的各个参数。
box-shadow : h-shadowv-shadowblurspreadcolorinset;
h-shadow :表示水平(即x轴)阴影位置的必填项。 正值显示在元素的右侧,负值显示在元素的左侧。
v-shadow :表示垂直方向、即y轴阴影位置的必填项目。 正值显示在元素下方,负值显示在元素上方。
blur :可选。 表示模糊的距离。 模糊数值越大,锐度越小,阴影越模糊。 不允许负值,将其处理为0。
spread:(可选)表示阴影的大小。 可以理解为元素到阴影的距离。 正值会将阴影向所有方向延伸指定的值。 负值会使阴影小于元素本身的大小。
color:(可选)表示阴影颜色。 这个我没必要多说吧。 大家一定都能做到吧。
inset :可选。 将“外部阴影”更改为内部阴影。 默认值为outset
现在可以利用这个属性了。 这里介绍一些不常见的效果。
用阴影显示浮现效果。
原理是在元素下添加阴影,在鼠标上移时缩小阴影,然后将元素上移。
如下所示。
原始状态
老鼠经过后
实现代码如下:
html :
css:
责任编辑: