当前位置：首页 > Web开发 > 正文

文本可以设置多个阴影以逗号分隔即可

2024-03-31 Web开发

标签：

文本暗影介绍

在CSS中使用text-shadow属性设置文本暗影，该属性一共有4个属性值如：程度暗影、垂直暗影、（清晰度或模糊距离）、暗影颜色。

text-shadow属性值说明，，在文本暗影实践中：第一个值是设置暗影程度标的目的移动，第二个值是设置暗影垂直标的目的移动，第三个值是设置暗影模糊距离，第四个值是设置暗影颜色。

text-shadow属性值可以设置为负数。

文本可以设置多个暗影以逗号分隔断绝分手即可。

text-shadow: 1px 2px 3px red ,1px 2px 6px rebeccapurple; 文本暗影实践 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>文本暗影</title> <style> div{ font-size: 60px; color: seagreen; text-shadow: 1px 2px 3px red; } </style> </head> <body> <div>微笑是最初的崇奉，加油。</div> </body> </html>

元素暗影介绍

在CSS中使用box-shadow属性设置元素暗影。

box-shadow属性值说明如：第一个值是设置暗影程度标的目的移动，第二个值是设置垂直标的目的移动，第三个值是设置暗影清晰度，第四个值是设置暗影巨细，第五个值是设置暗影颜色，第六个值是设置暗影的位置默认暗影位置在外边，inset设置暗影在内部。

box-shadow属性值可以设置为负数。

box-shadow属性值可以设置多个暗影，用逗号分隔断绝分手即可。

元素暗影实践

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>元素暗影</title> <style> div{ width: 100px; height: 100px; border: 2px solid red; box-shadow: 3px 6px 8px darkblue ,4px 8px 6px rebeccapurple inset; } </style> </head> <body> <div>微笑是最初的崇奉，加油。</div> </body> </html>

技术图片