- 渐变
- 转换（又称变形）
- 过渡
- 多列
- 动画
- 复杂选择器
渐变
- 线性渐变
- 径向渐变
- 重复渐变（线性-径向渐变）
转换
实现缩放、旋转等效果。
例子：
<code>
#d1{
width:400px;
height:300px;
background-color : red;
}
#d1:hover{
transform : rotate(90 deg) scale(0.8);
}
上段代码含义是当鼠标移动到id属性为"d1"的元素时，其元素顺时针旋转90°且缩小到0.8。
rotate(90 deg) : id属性为"d1"的元素顺时针旋转90°
scale(0.8) : id属性为"d1"的元素缩小到0.8倍
</code>
过渡
在一定时间内，完成某种动画的效果，如背景色、边框、旋转等。
例子：
<code>
#d2{
width:400px;
height:300px;
background-color : red;
}
#d2:hover{
background : red;
transition : background 4s;
}
上段代码含义是当鼠标移动到id属性为"d2"的元素时，元素在4s内，背景色由原来的白色变成红色。
transition : background 4s : 在4s内背景色发生变化
</code>
多列
将文本内容设计成多列布局
<code>
.class1{
column-count:3;
}
<body>
<div class="class1">“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”
</div>
</body>
上段代码含义是文本被分成三列显示
</code>
动画
使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数。可用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0%（动画起始） 和 100%（动画完成）。
<code>
div{
width : 100px;
height : 100px;
background : red;
animation : donghua 5s;
}
@keyframes donghua {
0% {background: red;}
50% {background: blue;}
100% {background: green;}
}
上述代码的含义是：div块在5s内，由红变蓝再变绿。
0% {background: red;} <=> from {background : red;}
100% {background: green;} <=> to {background : green;}
</code>
复杂选择器
- 兄弟选择器
- 相邻兄弟选择器：以“+”连接（形如 element1+element2)；选择紧挨着下一个元素，二者必有同一个父元素
- 通用兄弟选择器：以“~”连接（形如 element1~element2）；两种元素必有同一个父元素，但element2不一定紧随element1。
- 属性选择器
- [id] : 有id属性的所有元素
- E[id] : 有id属性的所有E元素
- E[id][class] : 有id和class属性的所有E元素
- E[id="id1"] : 有id="id1"的E元素
- E[class="myClass"] : class属性为“myClass”的所有E元素
- E[class~="myClass"] : class属性是词列表，并且以空格隔开，其中词列表中包含了一个“myClass”词的所有E元素
- E[class^="b"] : class属性以“b”开头的所有E元素
- E[class*="b"] : class属性包含子串“b”的所有E元素
- E[class$="b"] : class属性以“b”结尾的所有E元素
- E[class|="b"] : class属性以“b”开头或以“b-”开头的所有E元素
- 伪类选择器
- 伪元素选择器
