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-07-06
-
乐华娱乐股价动态更新,收购Wakuku后报收3.29港元(乐华娱乐股价动态查询) 时间:2025-07-06
-
币安账户被冻结怎么办?-账号封禁或限制常见原因及解决方案 时间:2025-07-06
-
北京构筑AI热带雨林生态圈,资金算力场景人才四维并举(北京呀热谷热带植物) 时间:2025-07-06
-
币安币BNB有什么用?-BNB用途、价值与交易策略 时间:2025-07-06
-
俄罗斯将推出自己的卢布支持的稳定币RT-Pay支付平台 时间:2025-07-06
今日更新
-
PHP数组学习之计算数组元素总和
阅读:18
-
PHP数组学习之第一/最后一个元素的获取(一)
阅读:18
-
教你用一个PHP类来实现两个数间的加减乘除
阅读:18
-
ps如何利用“复制”“旋转”命令制作图形效果(总结)
阅读:18
-
PHP字符串练习三:转换字符串大小的4种方法
阅读:18
-
样式表css有哪几种类型
阅读:18
-
小程序如何获取到openid和session_key
阅读:18
-
css行内样式是内部样式吗
阅读:18
-
php的访问控制符有哪些
阅读:18
-
不为人知的小技巧:利用ps匹配颜色统一图片色调
阅读:18