css实现文字阴影，以及边框阴影

最新推荐文章于 2025-06-25 15:53:25 发布

长云9527

最新推荐文章于 2025-06-25 15:53:25 发布

阅读量1.1k

点赞数 1

分类专栏： CSS content CSS3 content

CSS content 同时被 2 个专栏收录

9 篇文章

订阅专栏

CSS3 content

9 篇文章

订阅专栏

本文详细介绍如何使用CSS的text-shadow属性为网页文字添加阴影效果，包括阴影的位置、模糊距离及颜色设置，通过实例展示了多种阴影应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、文字阴影（text-shadow: 1px 1px 1px lightgray）

text-shadow: 1px 1px 1px lightgray；

第一个1px:是向x坐标方向的偏移

第二个1px;是向y坐标方向的偏移

第三个1px；是模糊距离

第四的参数：颜色

例：

1、

<!DOCTYPE html>
<html>
<head>
 <title>shadow</title>
 <meta charset="UTF-8">
 <link rel="stylesheet" type="text/css" href="">
 <style type="text/css">
 @keyframes move{
 from{
 background-position: 0 0;
 }
 to{
 background-position: 0 100px;
 }
 }
 *{
 margin: 0;
 margin: 0;
 }
 p{
 width: 500px;
 height: 130px;
 line-height: 100px;
 text-align: center;
 font-size: 80px;
 }
 p:nth-of-type(1){
 background-color: tan;
 background-image: linear-gradient(red,orange,yellow,yellowgreen,skyblue,pink);
 -webkit-background-clip: text;
 color: transparent;
 animation: move 2s linear infinite;

}
 p:nth-of-type(2){
 background-color: #555;
 text-shadow: 1px 1px 1px lightgray, -1px -1px 1px #aaa;
 }
 p:nth-of-type(3){
 background-color: #ccc;
 color: #fff;
 text-shadow:0 1px 0 #eee,
 0 2px 0 #ccc,
 0 3px 0 #bababa,
 0 4px 0 #aaa,
 0 5px 0 #999,
 0 6px 0 #888,
 0 7px 0 #777;
 }
 p:nth-of-type(4){
 background-color: #000;
 color: #fff;
 text-shadow: 5px 5px 15px hotpink,
 -5px 5px 35px hotpink,
 5px -5px 35px hotpink,
 -5px -5px 35px hotpink;
 }
 p:nth-of-type(5){
 background-color: #ccc;
 color: transparent;
 text-shadow: 0 0 10px hotpink;
 }
 </style>
</head>
<body>