CSS3阴影如何使用？说实话，这个问题问得hen好，哈哈，因为阴影效果在网页设计中超级常见。

咱就是说你有没有见过那些酷炫的网页，文字或按钮dou有阴影效果，kan起来特别有层次感。

专门给文字加阴影，语法超级简单。

text-shadow: 水平偏移 垂直偏移 模糊度 颜色;

其实也没啥难的，就4个参数。

水平偏移正数向右，负数向左，你懂的。

垂直偏移正数向下负数向上，不对不对，应该是正数向下才是正常的嘛！

模糊度值越大越模糊，不Neng为负哦，不然那个那个...没效果了。

颜色阴影颜色，可省略，默认是文字颜色。

来kankan实际用法吧！

/* 基础阴影 */text-shadow: 2px 2px 4px #333;/* 发光效果 */text-shadow: 0 0 8px #00aaff;/* 多重阴影 */text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;

为什么百度不收录我的网站呢？害，这个问题啊，说复杂也复杂，说简单也简单，可Neng你的网站内容不够丰富，或者优化Zuo得不够好吧！

给div、图片、按钮、卡片加阴影，百分百网页美化dou用它。

使用box-shadow属性 要实现CSS3四周阴影效果,你Ke以使用box-shadow属性。这个属性允许你向元素添加一个或多个阴影。

我用Zui通俗、Neng直接上手的方式给你讲清楚，附带复制即用的代码。

shadow 里Zui常用的两个阴影属性：

box-shadow: 水平偏移 垂直偏移 模糊度 扩散半径 颜色 内外阴影;

h-shadow水平偏移，正右负左嘛！

v-shadow垂直偏移，正下负上，你get到了吗？

blur模糊半径。

sprd:扩散半径 。

:: 阴影颜色。

:内 阴影 。

/* 卡片柔和阴影 */box-shadow : px px rgba ;

/* 卡片凹陷效果 */box-shadow : inset px px rgba ;

 box-shadow :     px red ,     px blue ,     px green ; 

三、Zui 实用的 种 阴影效 果

 box-shadow :   px   px rgba  ; 
// 卡片柔和 下沉效 果
.card {
    box-shadow:   px   px rgba;
}

`div{transition:.s;}div:hover{box-shadow:pxpxrgba;transform:translateY;}

`box-shadow:pxpx#fa;`
//hover 发 光动效
.btn{
    transition:.s;
}
.btn:hover{
    box-shadow:pxpx#fa;
}
.内 阴影 
`box-shadown:insetpxprgba;`
细 边框 阴
`box-shadown:px#ccc;`
// 代替 border 的细 线 阴
.card{
    box-shadown:px#ccc;
}
文字 发 光
`text-shadown:px#fff,px#fa;`
//多 重 文本 阴 实现 高级 发 光
.title{
    text-shadown:px#fff,px#fa;
}
四 、快
区分 & 
记忆 
| 属性 | 作 
用 | Zui常用 格 
式 |
| --- | --- | --- |
| text -shadow | 文字 
阴 
| ` ` p x p x p x `# ` |
| box -shadow |盒 子 
| ` ` p x p x rgba  |
*偏 移 ：** 正 右 下 ， 负 左 上 **
*模 糊 ：** 越大越柔 **
*扩散:** 越大越大**
*内 阴:** 加inset**
五 、小技巧
* 阴 使用**rgba** geng自:**rgba**.
*直偏移> 平偏移geng符合视觉惯.
*配 **transition** hover动画超好kan.
*重 阴 = 高级质.
###结
- **t-shdow**:给文字加,4个参,单.
- **bx-sdow**:给盒子加,6个参,支持内外、多层.
- Zui实用:` p x p xrba`,常用于卡片投影.
想凹陷就加 **nset**.
你需要我给你Zuo一个**可在线调试的投影演示页**吗?直接复制就Neng用!
说实话,CSS投影并不难,但要Zuo好kan真的需要花点心思去调参.
多尝试,你也Ke以成为设计大佬!
.