css怎么实现下边框阴影效果-木庄网络博客

2022-03-20 12:24:11 PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者青灯夜游，侵删。

在css中，可以使用box-shadow属性来实现下边框阴影效果，语法“box-shadow:0px 15px 10px -15px #000;”。box-shadow属性可以向框添加一个或多个阴影，用逗号分隔阴影列表。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

css box-shadow 属性

box-shadow 属性向框添加一个或多个阴影。

语法

1	`box-shadow: h-shadow v-shadow blur spread color` `inset;`

注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

【推荐教程：CSS视频教程】

syntax-1

1	`box-shadow:2px 2px 5px #000;`

1	`box-shadow:0px 0px 10px #000;`

syntax-2

1	`box-shadow:inset 2px 2px 5px #000;`

syntax-3

1	`box-shadow:0px 0px 5px 10px #000;`

1	`box-shadow:0px 15px 10px -15px #000;`

1	`box-shadow:inset 0px 15px 10px -15px #000;`

使用伪元素::before和::after，我们能创造出非常逼真的只有图片才能实现的阴影效果。让我来看一个例子：

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者