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

css阴影怎么写插图

本教程操作环境: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阴影怎么写的详细内容,更多请关注811轩轩资源网其它相关文章!

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注