方法:1、使用text-shadow属性,语法“text-shadow: 水平阴影 垂直阴影 模糊距离 颜色;”;2、使用Box-shadow属性,语法“Box-shadow: 水平阴影 垂直阴影 模糊距离 阴影大小 颜色 inset;”。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
text-shadow
属性用于设置带阴影的文本;可设置阴影的像素长度、宽度和模糊的距离以及阴影的颜色。
语法:
text-shadow: h-shadow v-shadow blur color;
属性值:
h-shadow:设置水平阴影的位置,允许负值。
v-shadow:设置垂直阴影的位置,允许负值。
blur:设置模糊的距离。
color:设置阴影的颜色。
示例:
<!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>
Box-shadow
属性可以将阴影应用于文本框,可设置中阴影的像素长度,宽度和模糊的距离以及阴影的颜色。
语法:
Box-shadow: h-shadow v-shadow blur spread color inset;
属性值:
h-shadow:设置水平阴影的位置,允许负值;必需值,不可省略。
v-shadow:设置垂直阴影的位置,允许负值;必需值,不可省略。
blur:设置模糊距离;可选值,可省略。
spread:设置阴影的大小;可选值,可省略。
color:设置阴影的颜色;可选值,可省略。
inset:设置从外层的阴影(开始时)改变阴影内侧阴影;可选值,可省略。
示例:
<!DOCTYPE html> <html> <head> <Meta charset=UTF-8> <title>css设置阴影效果</title> <style> .demo{ width: 400px; height: 300px; margin: 50px auto; } .demo img{ Box-shadow: 10px 10px 10px rgba(0,0,0,.5); /*考虑浏览器兼容性*/ -moz-Box-shadow: 10px 10px 10px rgba(0,0,0,.5); -webkit-Box-shadow: 10px 10px 10px rgba(0,0,0,.5); } </style> </head> <body> <div class=demo> <img src=img/1.jpg/> </div> </body> </html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。