#### 文字阴影
![](https://box.kancloud.cn/d5e17865b38f301f03ec4898aa198e9d_778x443.png)
~~~
1.text-shadow: none|h-shadow v-shadow blur color;宽偏移 高偏移 模糊度 颜色
2.阴影不占位置,不占总体空间
3.text-shadow可设置多个 如:
text-shadow:2px 3px 4 #333,-2px -3px 4 red;
~~~
* * * * *
#### 盒子阴影(可以设置多个)
~~~
box-shadow: 60px -16px teal; /* offset-x | offset-y | color */
box-shadow: 10px 5px 5px black; /* offset-x | offset-y | blur-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* offset-x | offset-y | blur-radius | spread-radius | color */
模糊度|展开度/扩散度,影响阴影宽度
box-shadow: inset 5em 1em gold; /* inset | offset-x | offset-y | color */
inset:内阴影,会被图片遮住
box-shadow: 3px 3px red, -1em 0 0.4em olive; /* Any number of shadows, separated by commas */
/* Global keywords */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;
~~~
- 1.基本样式
- 0.样式初始化
- 1. 渐变色
- 2. hover问题
- 3. 阴影
- 4. 选择器
- 5. border.画边线
- 6. 水平垂直居中
- 7.input 输入框需要缩进
- 8.文字问题
- 2. 方法
- 1. 定位浮动和flex
- 1. 阮一峰
- 2. position
- 3. flex
- 2. bootstrap 3
- 3. sass语法
- 4.margin-top bug 解决方法
- 5. iconfont图标
- 3. 动画特效
- 特效总结
- 动画
- css2d转换
- 过渡
- 1. 入场从无到有
- 2. 两面切换
- 3. 小三角及原理
- 4. 点击图片单独显示
- 5. 导航条吸顶
- 6. 进度条
- 7. animate效果 jquery
- 8.3D透视旋转
- 4.grid布局
- 1.grid布局 网格居中对齐
- HTML
- 第一节、学习网站
- 第二节、封装
- 第三节、快捷键使用