CSS3

新增选择器

子级选择器

• 选择范围：父子关系，只选择子
• 写法：E1(父)>E2（子）

兄弟选择器

1. 相邻兄弟选择器

• 选择范围：有同父级元素的 所有相邻子元素
• 写法：E1 + E2

2. 其他兄弟选择器

• 选择范围：有同父级元素的子元素E1后的所有E2
• 写法：E1 ~ E2

结构伪类选择器

1. nth -child(n)

• n 可以是数字，关键字和公式
• n 如果是数字，就是选择第 n 个
• 常见的关键词 even 偶数 odd 奇数 • 常见的公式如下 ( 如果 n 是公式，则从 0 开始计算，n是从 0 ，1，2，3.. 一直递增）
• 但是第 0 元素或者超出了元素的个数会被忽略
• 匹配父元素的第 n 个子元素 E，同时需要满足 两个条件

2. nth-of-type(n)

• 匹配同类型中的第 n 个同级兄弟元素 E，会忽视其他同级的非同类型元素。

伪元素选择器

注意

• 伪元素的冒号前不能有空格
• 只能给双标签元素使用
• 必须设置content属性
• 创建的元素为行内元素
• 在DOM里看不见

属性选择器

• 属性选择器用来选择包含指定属性的标签

盒模型（box-sizeing 移动端）

1. content-box(标准模式)

• 默认模式

2. border-box

• 内缩

边框圆角属性（border-radius）

IE8不支持

写法

• border-radius: x/y;
• border-radius: x;
• border-radius: 左上 右上 右下 左下；
• border-radius: 左上 右上和左下 右下
• border-radius: 左上和右下 右上和左下

文字阴影（text-shadow）

属性值：

写法

/* 水平阴影、垂直阴影、 模糊距离，颜色 可添加多层 逗号隔开  */
text-shadow: 3px 3px 3px #000000，
               3px 3px 3px #000000，
                3px 3px 3px #000000;

盒子阴影（box-shadow）

属性值：

写法

比文字多一个 inset

/* 水平阴影、垂直阴影、 模糊距离，扩展大小，颜色，是否内边框 */

过度属性（transition）

写法

-综合属性

transition： 过渡属性 过渡时间 运动曲线 延时时间；

-单一属性

--运动曲线（transition-timing-function）

2D转换（transform）

位移（translate（）居中效果）

写法

• transform:translate(x/y);
• transform:translate(x);

缩放（scale（））

写法

旋转（rorate()）

写法

transform:rorate(数字deg)数字 +顺时针 -逆时针

注意

旋转同时转坐标轴

倾斜（skew（））

写法

transform:skew(数字deg（水平），数字deg（垂直）)

基准点（transform-origin）

写法

transform-origin:x y;

3D转换（transform）

transform-style

属性值：

• flat：所有子元素在 2D 平面呈现
• preserve-3d：保留 3D 空间 必须先在父级设置透视属性和transform-style

透视(perspective)

设置给父级

旋转

效果

属性值的角度区分正负，正数表示沿对应坐标轴顺时针方向旋转，负数表示沿对应坐标轴逆时针方向旋转

位移

属性值

动画

创建动画

@keyframes 规则

写法：

@-webkit-keyframes 动画名称
/* Safari and Chrome */

	{
	from {
		left: 200px;
		opacity: 0;
	}

	to {
		left: 500px;
		opacity: 0.7;
	}
}

绑定动画

animation 属性

写法：

div { animation: 动画名称 过渡时间 速度曲线 动画次数 延时时间； }

单一属性

兼容性

加-webkit