CSS3 互动版

新增属性选择器
简介 匹配属性值——开始值 匹配属性值——包含值 匹配属性值——结尾值
新增结构伪类选择器
简介 选择首个子元素 选择末尾子元素 选择首个类型子元素 选择末尾类型子元素 选择一或多个子元素 选择类型子元素(倒序) 选择指定类型元素 选择父元素的特定子元素(倒序) 选择有唯一子元素的元素 选择元素的子元素并类型是唯一的子元素 选择内容为空的元素
CSS3 圆角边框
简介 border-radius属性 border-radius中指定两个半径 不显示边框 修改边框种类 绘制四个角不同半径的圆角边框 CSS3 圆角边框练习
CSS3 图像边框
简介 border-image属性 border-image属性最简单的使用方法 使用border-image属性来指定边框宽度 中央图像自动拉伸 指定四条边中图像的显示方法 使用背景图像
CSS3 背景
简介 background-size 属性（调整图片大小） background-size 属性（背景图片拉伸） background-origin 属性 多重背景图片 background-clip 属性 新的背景属性
CSS3 文本效果
简介 text-shadow属性使用方法 位移距离 阴影的模糊半径 阴影的颜色 指定多个阴影 自动换行
CSS3 字体
使用您需要的字体 使用粗体文本 CSS3 字体描述符
CSS3 2D 转换
简介 2D 转换 translate() 方法 rotate() 方法 scale() 方法 skew() 方法 matrix() 方法 新的转换属性 2D Transform 方法
CSS3 3D 转换
简介 如何工作与浏览器支持 rotateX() 方法 rotateY() 旋转 转换属性 2D Transform 方法
CSS3 过渡
简介 如何工作 多项改变 过渡属性 使用了简写的 transition 属性
CSS3 动画
简介 实例 CSS3 动画 什么是 CSS3 中的动画？ 实例改变背景色和位置 CSS3 动画属性 包含所有动画属性实例 使用了简写的动画 animation 属性
CSS3 多列
简介 CSS3 创建多列 CSS3 规定列之间的间隔 CSS3 列规则 新的多列属性
CSS3 用户界面
简介 CSS3 Resizing CSS3 Box Sizing CSS3 Outline Offset 新的用户界面属性
  1. 全部教程
  2. CSS3
  3. CSS3
  4. text-shadow属性使用方法
在线工具推荐： Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

text-shadow属性使用方法

text-shadow属性使用方法如下所示。

text-shadow:length length length color

其中，前面三个length分别指阴影离开文字的横方向距离、阴影离开文字的纵方向距离和阴影的模糊半径，color指阴影的颜色。

下面是一个text-shadow属性的使用示例。在该示例中给一段红色文字绘制灰色阴影。其中阴影离开文字的横方向距离和纵方向距离均为5个像素。

.wrap
{
   text-shadow:5px 5px 5px gray;
   color:red;
   font-size:50px;
   font-weight:bold;
}
请亲自在右侧把纵方向投影距离变为10px。
在线互动课程