CSS3 示例
本节包含一大堆示例，展示了各种 CSS 属性及其实际功能。
CSS 文本
CSS 字体
CSS 链接
CSS 列表
CSS 表格
- 设置表格的边框
- 指定表格的维度
- 通过折叠表格边框来创建更好的表格
- 设置表格单元格内文本的水平对齐方式
- 设置内容的垂直对齐方式
- 指定空单元格的显示方式
- 指定表格单元格的填充
- 指定表格布局算法 - 自动或固定
- 设置表格标题的位置
CSS 背景
- 设置元素的背景色
- 将图像设置为元素的背景
- 水平或垂直重复背景图像
- 指定背景图片的定位
- 固定的背景图片不会随包含的元素滚动
- 一次性设置所有背景属性 - 背景速记属性
- 设置背景图片大小
- 设置背景剪辑
- 设置背景原点
- 为一个元素添加多个背景
CSS 单位
CSS 维度
CSS 对齐方式
CSS 定位
CSS 显示
CSS 边框和轮廓
CSS 边距和内边距
CSS 不透明度
CSS 生成的内容
CSS 伪类
- 设置超链接不同状态的样式
- 使用 :focus 伪类设置焦点表单元素的样式
- 使用 :first-child 伪类设置元素的第一个子元素的样式
- 使用 :first-child 伪类为元素的最后一个子元素设置样式
- 使用 :nth-child 伪类设置元素的第 n 个子元素的样式
- 使用 :lang() 伪类设置特定语言的样式
- 使用带有选择器的伪类
CSS 伪元素
- 使用 ::first-letter 伪元素创建首字下沉效果
- 使用 ::first-line 伪元素对文本的第一行进行不同的样式化
- 使用 ::before 和/或 ::after 伪元素在元素之前和/或之后插入一些内容
- 在类中使用伪元素
CSS3 渐变
- 创建从上到下方向的线性渐变
- 创建从左到右方向的线性渐变
- 沿对角线创建线性渐变
- 使用角度设置线性渐变的方向
- 使用多个色标创建线性渐变
- 在创建渐变时设置色标位置
- 重复线性渐变
- 创建径向渐变
- 设置径向渐变的形状
- 设置径向渐变的大小
- 重复径向渐变
- 使用渐变的透明度
CSS3 投影
CSS3 2D 变换
CSS3 3D 变换
- 使用 translate3d() 方法在三维空间中移动元素
- 使用 rotate3d() 方法在三维空间中旋转元素
- 使用 scale3d() 方法在三维空间中缩放元素
- 使用 matrix3d() 方法应用 3D 变换
- 对元素应用多重 3D 变换
CSS3 过渡
CSS3 动画
CSS3 多列布局
Advertisements