freeCodeCamp/guide/chinese/css/css3-shadow-effects/index.md

title, localeTitle

title	localeTitle
CSS3 Shadow Effects	CSS3阴影效果

CSS3阴影效果

使用CSS3，您可以创建两种类型的阴影： text-shadow （向文本添加阴影）和box-shadow （向其他元素添加阴影）。

CSS3文字阴影

text-shadow属性最多可以包含四个值：

• 水平阴影
• 垂直阴影
• 模糊效果
• 颜色

例子：

• 普通文字阴影

h1 { 
    text-shadow: 2px 2px 5px crimson; 
 } 

• 发光的文字效果

h1 { 
    text-shadow: 0 0 4px #00FF9C; 
 } 

多个阴影

要实现此目的，您只需在两组（或多组）值之间添加逗号：

h1 { 
    color: white; 
    text-shadow: 0 0 3px #F10D58, 0 0 7px #4578D5; 
 } 

CSS3 Box Shadow

box-shadow属性最多可以包含六个值：

• （可选） inset关键字（将阴影更改为框架内的一个）
• 水平阴影
• 垂直阴影
• 模糊效果
• 传播
• 颜色

例子：

.first-div { 
    box-shadow: 1px 1px 5px 3px grey; 
 } 
 
 .second-div { 
    box-shadow: 0 0 5px 1px lightgrey; 
 } 
 
 .third-div { 
    box-shadow: inset 0 0 15px 5px rgba(0,0,0,0.75); 
 } 

更多信息：

• MDN网络文档
• 检查浏览器支持
• CSS盒子阴影生成器 （随意尝试盒阴影）