CSS如何添加阴影效果?
1、添加文本阴影
在CSS中可以使用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>text-shadow属性</title> <style> h1 { color: red; text-shadow: 3px 5px 5px #656B79; } </style> </head> <body> <h1>Hello world!</h1> </body> </html>
效果图:
2、添加边框(图像)阴影
在CSS中可以使用box-shadow属性将阴影应用于文本框。此属性可神色中阴影的像素长度,宽度和模糊的距离以及阴影的颜色。
语法:
box-shadow: h-shadow v-shadow blur spread color inset;
属性值:
● h-shadow:设置水平阴影的位置,允许负值;必需值,不可省略。
● v-shadow:设置垂直阴影的位置,允许负值;必需值,不可省略。
● blur:设置模糊距离;可选值,可省略。
● spread:设置阴影的大小;可选值,可省略。
● color:设置阴影的颜色;可选值,可省略。
● inset:设置从外层的阴影(开始时)改变阴影内侧阴影;可选值,可省略。
示例1:添加边框阴影
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>box-shadow属性</title> <style> div{ width:300px; height:100px; background-color:red; box-shadow: 10px 10px 5px #888888; } </style> </head> <body> <div>Hello world!</div> </body> </html>
效果图:
示例2:添加图像阴影
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片阴影</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="1.webp" /> </div> </body> </html>
效果图:
以上就是CSS如何添加阴影效果?的详细内容,更多请关注易知道|edz.cc其它相关文章!
相关内容
-
win10多任务按键怎么设置在底部详细方法
win10多任务按键怎么设置在底部详细方法,按键,任务,在使用电脑...
-
WPS里面PDF如何删除一页|word文档怎么去除多余
WPS里面PDF如何删除一页|word文档怎么去除多余的一页,WPS教程...
-
电脑里没有word文档怎么办|为什么我的电脑没有w
电脑里没有word文档怎么办|为什么我的电脑没有word文档,,1. 为...
-
设置里程碑|设置里程碑的方法有哪些
设置里程碑|设置里程碑的方法有哪些,,1. 设置里程碑的方法有哪...
-
Outlook的PST文件损坏的修复方法
Outlook的PST文件损坏的修复方法,文件, ...
-
手提电脑手写怎么设置|电脑手写设置方法
手提电脑手写怎么设置|电脑手写设置方法,,电脑手写设置方法看...
-
对照审阅两个wps文档|快速比较两份WPS文档
对照审阅两个wps文档|快速比较两份WPS文档,审阅,对照,两个,文...
-
打印机常见故障排除方法HP5000打印机为例
打印机常见故障排除方法HP5000打印机为例,,HP 50005100打印机...
-
手机版wps里如何给字加拼音|wps在文字上加拼音
手机版wps里如何给字加拼音|wps在文字上加拼音的方法wps怎么...
-
小编辑器教你减少计算机网络流量的最简单方法
小编辑器教你减少计算机网络流量的最简单方法,,核心提示:教你如...
-
Android手机模拟器的安装方法_模拟器安装教程在
Android手机模拟器的安装方法_模拟器安装教程在计算机技能,,核...
-
反向选择word快捷键|word文档转向快捷键
反向选择word快捷键|word文档转向快捷键,,1. word文档转向快捷...
-
的故障_计算机解决无法打印文档
的故障_计算机解决无法打印文档,,核心提示:最近,打印机出现了一...
-
如何升级路由器的路由器升级_192.168.1.1鲜为人
如何升级路由器的路由器升级_192.168.1.1鲜为人知的方法,,核心...
-
电脑装cpu风扇全过程|电脑cpu风扇安装方法
电脑装cpu风扇全过程|电脑cpu风扇安装方法,,1. 电脑cpu风扇安...