CSS如何添加阴影效果？

在CSS中可以使用阴影效果属性在HTML文档中添加文本和边框（图像）阴影。下面本篇文章就来给大家介绍一下CSS的阴影效果属性，CSS添加阴影效果的方法，希望对大家有所帮助。

1、添加文本阴影

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

语法：

text-shadow: h-shadow v-shadow blur color;

属性值：

●　h-shadow：设置水平阴影的位置，允许负值。

●　v-shadow：设置垂直阴影的位置，允许负值。

●　blur：设置模糊的距离。

●　color：设置阴影的颜色。

示例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>text-shadow属性</title> <style> h1 { color: red; text-shadow: 3px 5px 5px #656B79; } </style> </head> <body> <h1>Hello world！</h1> </body>
</html>

效果图：

2、添加边框（图像）阴影

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

语法：

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

属性值：

●　h-shadow：设置水平阴影的位置，允许负值；必需值，不可省略。

●　v-shadow：设置垂直阴影的位置，允许负值；必需值，不可省略。

●　blur：设置模糊距离；可选值，可省略。

●　spread：设置阴影的大小；可选值，可省略。

●　color：设置阴影的颜色；可选值，可省略。

●　inset：设置从外层的阴影（开始时）改变阴影内侧阴影；可选值，可省略。

示例1：添加边框阴影

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>box-shadow属性</title> <style> div{width:300px;height:100px;background-color:red;box-shadow: 10px 10px 5px #888888;}</style> </head> <body> <div>Hello world！</div> </body>
</html>

效果图：

示例2：添加图像阴影

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>图片阴影</title><style>.demo{width: 400px;height: 300px;margin: 50px auto;}.demo img{box-shadow: 10px 10px 10px rgba(0,0,0,.5);/*考虑浏览器兼容性*/-moz-box-shadow: 10px 10px 10px rgba(0,0,0,.5);-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,.5);}</style></head><body><div class="demo"><img src="1.jpg" /></div></body>
</html>

效果图：

CSS如何添加阴影效果？相关推荐

html如何给文字添加阴影效果,css中怎么给字体添加阴影效果
css中可以使用text-shadow属性给字体添加阴影效果,text-shadow是CSS样式属性单词,是设置对象中文本的文字字体是否有阴影及模糊效果的CSS样式. text-shadow属性的语法 ...
html css投影效果,CSS添加阴影效果
在CSS中可以使用阴影效果属性在HTML文档中添加文本和边框(图像)阴影.下面本篇文章就来给大家介绍一下CSS的阴影效果属性,CSS添加阴影效果的方法,希望对大家有所帮助. 1.添加文本阴影在CSS ...
css给图片添加阴影效果方法
css给图片添加阴影效果方法 box-shadow属性代码 box-shadow属性 css可以实现很多的图片效果,图片阴影效果就是其中之一,那么css如何给图片添加阴影效果?本篇文章就给大家介绍如 ...
java 图片阴影_Java如何为 PPT 中的图形添加阴影效果
在PowerPoint文档中,给图片添加阴影效果能增强图片的逼真度,使其贴近现实效果,提升文档的美观度. 本文将展示如何使用Free Spire.Presentation for Java为PPT中的 ...
python 为html页面增加背景_Python 给html css自动添加注释
Python 给html css自动添加注释(2020年11月8日) 背景大二上学期专业开设了网页设计课程,专门学习html和css,有时候也经常有同学找我来帮忙看看他们写的代码,并且改改,我就忽然 ...
java 图片阴影_Java 为 PPT 中的图形添加阴影效果
在PowerPoint文档中,给图形添加阴影效果能增强图形的立体感,使其贴近现实效果,提升文档的美观度. 本文将展示如何使用Free Spire.Presentation for Java为PPT中的 ...
值得使用的CSS库添加图像悬停效果！
一个悬停效果简单来说可以定义为在颜色,产生的效果文字的大小或形状或任何其他形式的变化发生,当你把鼠标光标移动到图像.这可以通过CSS编码容易实现.这里我们介绍国外8个CSS库添加图像悬停效果,提高网站 ...
CSS实现带阴影效果的三角形
目标效果用将width和height设置为0,通过border特性来实现三角形的效果的方法,想必很多人都实现过. 但是如果要求三角形边缘具有阴影效果,这样一来以前的实现方式显然是不行,因为box-s ...
如何给物体添加阴影效果
阴影在3D游戏中是非常重要的一个细节,所以这一章我们专门介绍如何给物体添加阴影效果. 我们在运行前面的Demo的时候会有一种感觉,就是经过大树的时候会有阴影投射到方块上. 那么下面就来介绍一下如何给方 ...

CSS如何添加阴影效果？

CSS如何添加阴影效果？相关推荐

最新文章

热门文章