css怎么实现阴影效果

2022-03-25 14:14| 来源: 网络整理| 查看: 265

css实现阴影效果的方法：1、使用text-shadow属性，可以设置带阴影的文本，实现文字阴影效果；2、使用box-shadow属性，可以将阴影应用于文本框，实现边框阴影效果。

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

方法1：使用text-shadow属性实现文字阴影效果

text-shadow属性用于设置带阴影的文本；可设置阴影的像素长度、宽度和模糊的距离以及阴影的颜色。

示例：

css设置文本阴影效果 h1 { color: red; text-shadow: 3px 5px 5px #656B79; } 文本阴影！

方法2：使用box-shadow属性实现边框阴影效果

box-shadow属性可以将阴影应用于文本框，可设置中阴影的像素长度，宽度和模糊的距离以及阴影的颜色。

示例：

css设置边框阴影效果 div{ width:300px; height:100px; background-color:red; box-shadow: 10px 10px 5px #888888; } 边框阴影！

效果图：

（学习视频分享：css视频教程）

【本文地址】

今日新闻