CSS Text-shadow

2025年3月26日 | 阅读 2 分钟

顾名思义，此 CSS 属性为文本添加阴影。它接受逗号分隔的阴影列表，这些阴影应用于文本。其默认属性为 none。它可以在元素的文本内容上应用一个或多个文本阴影效果。

让我们来看一下 text-shadow 属性的语法。

语法

值

h-shadow: 这是必需值。它指定了水平阴影的位置，并允许负值。

v-shadow: 这也是必需值，它指定了垂直阴影的位置。它不允许负值。

blur-radius: 这是模糊半径，这是一个可选值。其默认值为 0。

color: 这是阴影的颜色，也是一个可选值。

none: 这是默认值，表示没有阴影。

initial: 用于将属性设置为其默认值。

inherit: 它只是继承其父元素属性。

让我们通过一些插图来理解它。

示例 - 简单阴影

<!DOCTYPE html> 
  
<html> 
<head> 
    <title> font-weight property </title> 
    <style> 
      p.simple{
        text-shadow: 3px 3px red;
      }
    </style> 
</head> 
  
<body> 
    <p class="simple"> 
      Simple Shadow
    </p> 
 
</body> 
</html>

示例 - 模糊阴影

<!DOCTYPE html> 
  
<html> 
<head> 
    <title> font-weight property </title> 
    <style> 
      p.fuzzy{
        text-shadow: 3px 3px 3px violet;
        font-size:30px;
        text-align:center;
      }
    </style> 
</head> 
  
<body> 
    <p class="fuzzy"> 
    Fuzzy Shadow
    </p> 
 
</body> 
</html>

示例 - 多重阴影

<!DOCTYPE html> 
  
<html> 
<head> 
    <title> font-weight property </title> 
    <style> 
      p.multi{
        text-shadow: -3px -3px 3px blue, 3px 3px 3px red;
        font-size:30px;
        text-align:center;
      }
    </style> 
</head> 
  
<body> 
    <p class="multi"> 
    Multiple Shadows
    </p> 
 
</body> 
</html>

示例 - 发光效果

<!DOCTYPE html> 
  
<html> 
<head> 
    <title> font-weight property </title> 
    <style> 
      .multi{
        text-shadow: 0 0 .1em cyan;
        background-color: black;
        font-size:50px;
        text-align:center;
      }
    </style> 
</head> 
  
<body> 
    <div class="multi"> 
    Glow Effect
    </div> 
 
</body> 
</html>

下一主题CSS text-transform

CSS Text-shadow

示例 - 简单阴影

示例 - 模糊阴影

示例 - 多重阴影

示例 - 发光效果

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS Text-shadow

示例 - 简单阴影

示例 - 模糊阴影

示例 - 多重阴影

示例 - 发光效果

相关帖子

CSS root

CSS Footer

CSS quotes

CSS min-height

CSS 边框

CSS 伪元素 before 和 after

CSS icons

CSS checkbox style

CSS Card Design

CSS min-width

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器