赞助我以写出更好的文章，give me a cup of coffee?
- 2017最新最全前端面试题
这篇文章主要是对css3系列详解的一个补充，也是对余下的知识点的一个归纳，主要是余下的知识点较少也较容易懂，而本人非较长文章不写，所以拿了几个知识点堆叠起来凑数吧。
box-sizing属性
box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。
- content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由
border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高
- border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置
width/height属性指的是border + padding + content
标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。
在标准w3c盒模型中，width和height指的是内容区域的宽度和高度。增加padding、边框和空白边不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
对内联元素设置margin-top，margin-bottom无效。设置padding才有效
box-shadow
E:{box-shadow: h-shadow(必需) v-shadow(必需) blur spread color inset;}即：
对象选择器 {box-shadow: X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式}
X轴偏移量和Y轴偏移量均可为负值，X轴偏移量为
负值时，向左偏；
Y轴偏移量为负值时，向上偏。
除此之外，box-shadow还可以添加一个或多个阴影，当有多个值时用逗号分开，如果设置投影方式为inset时，则为内投影，如果不设置，则默认为外阴影。
IE9以下是不支持CSS3的box-shadow的，但为了处理这个兼容问题，我们可以在IE下使用IE的shadow阴影滤镜来实现
filter: progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度（数值）, Strength=阴影半径（数值）该滤镜必须配合background属性一起使用，否则该滤镜失效。
.demo{
box-shadow: -2px 0 0 green, /*左边阴影*/
0 -2px 0 blue, /*顶部阴影*/
0 2px 0 red, /*底部阴影*/
2px 0 0 yellow; /*右边阴影*/
-webkit-box-shadow:0 0 10px 10px rgba(0,0,0,0.8) inset;//内阴影
}
//Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9
box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
box-shadow可以多层阴影同时使用，每层阴影之间用逗号隔开。最先写的阴影将显示在最顶层
实现翘边阴影效果
效果
HTML代码：
CSS代码：
.box {
width: 300px;
height: 100px;
background: #ccc;
border-radius: 10px;
margin: 10px;
}
.shadow {
position: relative;
max-width: 270px;
box-shadow: 0px 1px 4px rgba(0,0,0,0.3),/* 外阴影*/
0px 0px 20px rgba(0,0,0,0.1) inset;/*内阴影*/
}
.shadow::before,
.shadow::after {
content:"";
position:absolute;
z-index:-1;
}
.shadow::before,
.shadow::after {
content:"";
position:absolute;
z-index:-1;
bottom:15px;
left:10px;
width:50%;
height:20%;
}
.shadow::before,
.shadow::after {
content:"";
position:absolute;
z-index:-1;
bottom:15px;
left:10px;
width:50%;
height:20%;
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
transform:rotate(-3deg);
}
.shadow::after{
right:10px;
left:auto;
transform:rotate(3deg);
}
伪元素before和after意思是在被选元素的内容前或后 插入内容
text-shadow
E:{text-shadow: h-shadow v-shadow blur color;}
附：E即Element，元素的意思。
兼容IE的写法：
滤镜语法：
E {filter:shadow(Color=颜色值,Direction=数值,Strength=数值)}
Direction用于设定投影的主向，取值为0即零度（表示向上方向），45为右上，90为右，135为右下，180为下方，225为左下方，270为左方，315为左上方；Strength就是强度，类似于text-shadow中的blur值。
Border-radius
border-radius是一种缩写方法。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。如果没有“/”，则水平和垂直半径相等。
border-radius: 2em 1em 4em / 0.5em 3em;
等价于：
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
Gradient渐变
CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。
线性渐变在Webkit下的应用
-webkit-linear-gradient( [ || ,]? , [, ]* )//最新发布书写语法
第一个参数表示渐变类型（type），可以是linear（线性渐变）或者radial（径向渐变）。
第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点。这对值可以用坐标形式表示，也可以用关键值表示，比如 left
top（左上角）和left bottom（左下角）。
第四个和第五个参数，分别是两个color-stop函数。color-stop函数接受两个参数，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个表示该点的颜色。
线性渐变在Mozilla下的应用
语法：
-moz-linear-gradient( [ || ,]? , [, ]* )
参数：
其共有三个参数，第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left
top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。
RGBA和opacity
语法:
R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数| 百分数
A：透明度。取值0~1之间
/* IE6 - 8 */
filter: alpha(opacity=80);
/* 其他 */
opacity: 0.8;
RGBA比元素设置CSS的透明度更好，因为单独的颜色可以在不影响整个元素的透明度，他不会影响到元素其他的属性，比如说边框，字体同时也不会影响到其他元素的相关透明度。
column多列属性
column-count:栏目数
兼容性写法：
-webkit-column-count:3
-moz-column-count:3
column-width 属性规定列的宽度。
column-gap属性规定列之间的间隔column-rule 属性设置列之间的宽度、样式和颜色规则。
media query
使用方法：
@meida 设备类型 and (设备特征){样式代码}设备类型
13种设备特性
css3的浏览器支持情况
CSS3 属性
CSS3 选择器
数据来源：http://fmbip.com/litmus