首页 > 编程知识 正文

css盒子阴影效果怎么设置,前端css3阴影

时间:2023-05-03 07:24:34 阅读:37296 作者:2369

原标题: css3高级盒子-关机效果

自从CSS3问世以来,出现了各种酷炫的效果。 box-shadow属性用于创建阴影效果。

下面介绍一下其中的各个参数。

box-shadow : h-shadowv-shadowblurspreadcolorinset;

h-shadow :表示水平(即x轴)阴影位置的必填项。 正值显示在元素的右侧,负值显示在元素的左侧。

v-shadow :表示垂直方向、即y轴阴影位置的必填项目。 正值显示在元素下方,负值显示在元素上方。

blur :可选。 表示模糊的距离。 模糊数值越大,锐度越小,阴影越模糊。 不允许负值,将其处理为0。

spread:(可选)表示阴影的大小。 可以理解为元素到阴影的距离。 正值会将阴影向所有方向延伸指定的值。 负值会使阴影小于元素本身的大小。

color:(可选)表示阴影颜色。 这个我没必要多说吧。 大家一定都能做到吧。

inset :可选。 将“外部阴影”更改为内部阴影。 默认值为outset

现在可以利用这个属性了。 这里介绍一些不常见的效果。

用阴影显示浮现效果。

原理是在元素下添加阴影,在鼠标上移时缩小阴影,然后将元素上移。

如下所示。

原始状态

老鼠经过后

实现代码如下:

html :

css:

责任编辑:

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。