css如何设置阴影效果?
在CSS中可以使用text-shadow和box-shadow属性在HTML文档中添加文本和边框(图像)阴影。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css设置阴影效果</title> <style> h1 { color: red; text-shadow: 3px 5px 5px #656B79; } div{ width:300px; height:100px; background-color:red; box-shadow: 10px 10px 5px #888888; } </style> </head> <body> <h1>文本阴影!</h1> <div>边框阴影!</div> </body> </html>
效果图:
text-shadow
属性用于设置带阴影的文本;可设置阴影的像素长度、宽度和模糊的距离以及阴影的颜色。
语法:
text-shadow: h-shadow v-shadow blur color;
属性值:
h-shadow:设置水平阴影的位置,允许负值。
v-shadow:设置垂直阴影的位置,允许负值。
blur:设置模糊的距离。
color:设置阴影的颜色。
box-shadow
属性可以将阴影应用于文本框,可设置中阴影的像素长度,宽度和模糊的距离以及阴影的颜色。
语法:
box-shadow: h-shadow v-shadow blur spread color inset;
属性值:
h-shadow:设置水平阴影的位置,允许负值;必需值,不可省略。
v-shadow:设置垂直阴影的位置,允许负值;必需值,不可省略。
blur:设置模糊距离;可选值,可省略。
spread:设置阴影的大小;可选值,可省略。
color:设置阴影的颜色;可选值,可省略。
inset:设置从外层的阴影(开始时)改变阴影内侧阴影;可选值,可省略。
更多web前端开发知识,请查阅 HTML中文网 !!
以上就是css如何设置阴影效果?的详细内容,更多请关注易知道|edz.cc其它相关文章!