css阴影怎么写
时间:2021-07-20 来源:互联网
今天PHP爱好者给大家带来css阴影的写法,阴影的写法: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>
效果图:
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>
p {
width: 300px;
height: 100px;
background-color: #ff9900;
-moz-box-shadow: 10px 10px 5px #888888;
/* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<p>边框阴影</p>
</body>
</html>
效果图:
以上就是css阴影怎么写的详细内容,更多请关注php爱好者其它相关文章!
-
新三国志曹操传游历事件荀彧之影过关打法 2025-09-08
-
C语言中fgets()函数用法详解 2025-09-08
-
逆水寒玄机怎么搭配-pve交焚决英雄团本木桩10.6w 2025-09-08
-
代号砰砰幽灵有什么背景-代号砰砰幽灵角色故事 2025-09-08
-
PHP chdir()函数详解(定义、语法、参数、用法) 2025-09-08
-
超级忍反攻的斩击忍法极手里剑获取位置路线 2025-09-08