css怎么实现下边框阴影效果


本文摘自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。

1.png

【推荐教程: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的乐趣

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

阅读剩余部分

相关阅读 >>

css如何设置颜色透明度

css怎么隐藏标签

css link与import的区别是什么

background-position属性怎么用

css text-decoration-color属性怎么用

css如何让图片旋转

如何利用css实现放大缩小关闭效果

css文件中怎么引用图片不显示

css border-top-width属性怎么用

css如何实现禁止选择文本

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...