1、文字阴影？（针对文字）
text-shadow：
例如 text-shadow: 10px 10px 10px blue;四个值分别是 x y blur color
blur表示模糊值，越大越模糊
注：阴影的默认颜色是跟文字的颜色相同；通过逗号的方式进行分割，可以设置多阴影
2、box-shadow:盒子阴影（针对容器）
x
y
blur
color
inset
多阴影
例如： box-shadow: 10px 10px 10px 30px blue inset; 前面三个属性依次是x y blur,30px表示：容器周围模糊的扩散范围；inset表示内阴影，默认情况为外阴影
注：盒子阴影默认颜色是黑色。默认就是外阴影，如果设置outset不起作用，可选的值只有inset：内阴影；同样可以设置多阴影，用逗号隔开
3、mask遮罩
属性值：url
repeat
x
y
w
h
多遮罩
注：mask目前还没有标准化，需要添加浏览器前缀；默认是x y 都平铺
4、倒影
box-reflect(也没有标准，要加浏览器前缀)
above：表示上面的方向
below：表示下面的方向
left：左边
right：右边
距离
遮罩|渐变
注：渐变：只是针对透明度的渐变不支持颜色的渐变
scaleX(-1);scale（）取不同轴的负值可以达到图片翻转的效果
5、模糊与计算
blur
filter：blur（）
calc:可以实现百分比与像素的计算
例如：calc(100% - 100px);无理父容器多大，该子容器始终保持与父容器右边框相差100px距离
四则运算
6、分栏布局
column-count：分栏的个数;与column-width冲突只能设置一个
column-width：分栏的宽度
column-gap：分栏的间距
column-rule：分栏的边线
column-span：合并分栏,比如标题
7、伪类与伪元素
在css2.1中对伪类和伪元素的区别比较模糊，css3中对这两个概念做了比较清晰的解释，并且在语法上也做了很明显的区分。
css3中规定伪类由一个冒号开始，然后为伪类的名称；伪元素由两个冒号开始，然后是伪元素的名称、
伪类本质上是为了弥补常规css选择器的不足，以便获取到更多的信息。通常表示获取不存在于DOM树中的信息，或获取不能被常规css选择器获取的信息：
：hover
：focus
：empty
...
伪元素本质上是创建了一个有内容的虚拟容器,并对该虚拟容器添加样式。这个容器不包含任何DOM元素，但是可以包含内容，另外，开发者还可以为伪元素定制样式。
::selection
::first-line/first-letter
::before/after：往容器里面添加行内元素，并且可以修改行内元素的样式，故为伪元素
...
*伪类和伪元素的区别：
伪类是为了弥补css选择器的不足，添加的样式是在实际容器上：
/* 该背景属性通过伪类hover添加到box上去了，弥补了box选择器的不足 */
.box:hover{background: red;}
伪类元素则是虚拟一个有内容的容器，并对该容器添加样式：
为box容器中被选中的内容添加样式，这里被选中的内容即为一个虚拟的容器
.box::selection{background: red;color: yellow;}
8、css Hack(了解)
CSS Hack用来解决浏览器的兼容性问题，为不同版本的浏览器定制编写不同的CSS效果，使用每个浏览器单独识别的样式代码，控制浏览器的显示样式。
Hack分类：
1、CSS属性前缀法
是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展示效果。
前缀标识 兼容浏览器
_ IE6
+、* IE6、IE7
9 IE6~IE9
IE8~IE11
2、选择器前缀法
是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
前缀标识 兼容浏览器
*html IE6
*+html IE7
：root IE9以上及现代浏览器
3、IE条件注释法
这是一种IE浏览器转悠的Hack写法，微软官方推荐使用的hack方式
前缀标识 兼容浏览器
<!--[if IE]>...<![endif]--> IE
<!--[if IE 7]>...<![endif]--> IE7
<!--[if lte IE]>...<![endif]--> IE7以下
<!--[if ! IE 7]>...<![endif]--> 非IE7
注：IE10以上已经不支持注释法了（了解即可）
9、IE低版本的BUG（部分）
常见兼容性问题
1、透明度:opacity:IE8及以下版本不识别，写成兼容性写法:filter: alpha(opacity=50);
2、双边距:
/* IE6下的双边距bug，及解决方案 */加：_display:inline;（加_表示仅针对IE6）
.box{float:left; 100px;height: 100px;background: red;margin-left: 50px;_display:inline;}
3、最小高度:
/* IE6下的最下高度bug，最小高度为19px */
解决方法为加overflow-hidden;
4、图片链接产生边框:
<a href="#">
<img src="../img/练习1.jpg" alt="">
</a>
解决方法： img{border: none;}
10、渐进增强与优雅降级
渐进增强：针对低版本的浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和最佳功能达到更好地用户体验。
优雅降级：一开始就构建完整的功能，然后在针对低版本浏览器进行向下兼容(用不同方式实现和高级浏览器上一样的显示效果)
11、网页布局扩展
1、等高布局：
子容器的margin如果取负值则，则会使父容器的高度小于子容器的高度：
利用margin负值和padding的组合实现：
.parent{border: 10px black solid;overflow: hidden;}
.box1{float: left; 100px;background:red;margin-bottom: -2000px;padding-bottom: 2000px;}
.box2{float: right; 100px;background:blue;margin-bottom: -2000px;padding-bottom: 2000px;}
随着box1和box2内容的变多撑大父容器漏出hidden的区域，实现一种等高效果
2、三列布局：左右固定，中间自适应
1、BFC方式
2、定位
3、浮动（双飞翼布局、圣杯布局）(了解，一般用flex来做)
终点了解：利用margin负值
4、flex弹性