鸿 网 互 联 www.68idc.cn

当前位置 : 服务器租用 > 网站制作教程 > css > >

css阴影怎么写

来源:互联网 作者:佚名 时间:2022-06-27 14:46
阴影的写法:1、文本阴影“text-shadow: h-shadow v-shadow blur color;”;2、边框阴影“box-shadow: h-shadow v-shadow blur spread color inset;”。 本教程操作环境:windows7系统、CSS3HTML5版、Dell G3电脑。 1、

阴影的写法:1、文本阴影“text-shadow: h-shadow v-shadow blur color;”;2、边框阴影“box-shadow: h-shadow v-shadow blur spread color inset;”。

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

1、css文本阴影的写法

在css中,可使用text-shadow属性来实现带阴影的文本,text-shadow 属性应用于阴影文本。

语法

text-shadow: h-shadow v-shadow blur color;
值描述h-shadow必需。水平阴影的位置。允许负值。v-shadow必需。垂直阴影的位置。允许负值。blur可选。模糊的距离。color可选。阴影的颜色。

注意: text-shadow属性连接一个或更多的阴影文本。属性是阴影,指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0。

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css设置文本阴影效果</title> 
        <style> 
            h1 { 
                color: red; 
                text-shadow: 3px 5px 5px #656B79; 
            }
        </style> 
    </head> 
    <body> 
        <h1>文本阴影!</h1>
    </body> 
</html>

效果图:

1.png

2、css边框阴影的写法

在css中,可使用box-shadow属性实现边框阴影效果,box-shadow属性可以设置一个或多个下拉阴影的框。

语法

box-shadow: h-shadow v-shadow blur spread color inset;
值说明h-shadow必需的。水平阴影的位置。允许负值v-shadow必需的。垂直阴影的位置。允许负值blur可选。模糊距离spread可选。阴影的大小color可选。阴影的颜色。inset可选。从外层的阴影(开始时)改变阴影内侧阴影

注意:boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表,每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

示例:

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				width: 300px;
				height: 100px;
				background-color: #ff9900;
				-moz-box-shadow: 10px 10px 5px #888888;
				/* 老的 Firefox */
				box-shadow: 10px 10px 5px #888888;
			}
		</style>
	</head>
	<body>

		<div>边框阴影</div>

	</body>
</html>

效果图:

2.png

(学习视频分享:css视频教程)

以上就是css阴影怎么写的详细内容,更多请关注鸿网互联其它相关文章!

网友评论
<