css3新特性
阅读需要5分钟。
css的新特性是随着时代发展，从人们认为的必须增加的一些新功能或新属性。不管是安卓手机还是iPhone，他们的UI设计都偏向于扁平化设计，兼具实用性和美观性。网页设计一定程度上可以看成是平面设计，需要吸收前沿的大众喜欢的设计风格。
目录
1，圆角border-radius
2，阴影之box-shadow
3，阴影之text-shadow
4，背景渐变linear-gradient
5，转换transform
1，translate()移动
2，rotate()旋转
3，scale()缩放
4，skew()倾斜
5，3D转换之rotateX()
6，3D转换之rotateY()
7，translate3d()
六，过渡transition
七，动画animation
1，@keyframes创建动画
2，animation执行动画
八，绘制特殊图形
九，媒体查询
1，设置meta标签
2，媒体查询语句
十，响应式布局
十一，栅格系统
十二，多列
1，创建多列
2，设置每列之间的间隙
3，列边框
1，圆角border-radius
html的一些常见元素都类似于矩形，四四方方的。css属性border-radius可以为任意html元素设置圆角。这个属性呈现的样式有属性值的个数决定。当有四个值，对应矩形顺时针的四个直角。两个值是分别是：X对角线的两个直角。一个值时包括4个直角。
单位是px，他是四分之一圆的半径值。实例如下：
网页显示效果如下：
2，阴影之box-shadow
阴影指的是：物体把光遮住留下的影子。
blur用于增加模糊度。举例：使用复合属性写法。
box-shadow: 10px 10px 5px 5px cornflowerblue;/*依次对应各个属性*/网页显示效果如下：
3，阴影之text-shadow
4，背景渐变linear-gradient
类似于晚霞的效果，落霞与孤鹜齐飞，秋水共长天一色。
direction有：1，to right；2，to left；3，to bottom right；4，to bottom等。另外还有角度值，以deg为单位，以直角坐标系为参照，顺时针取角度。取值为-180到180之间。
5，转换transform
英文名transform，转换指的是：让元素改变性质，大小或者位置。常见的操作为：旋转，放缩，移动和倾斜。这四种操作都可以在2D或者3D形式下操作。
有些属性的值可能是函数形式的，称为css函数，例如伪类选择器的:not()，他是一个取非函数。transform是一个属性，他的属性值也是一个函数。
1，translate()移动
translate即转移的意思，让元素以网页左上角为参考点，向右或者向下移动。
.box{
width: 100px;
height: 80px;
background-color: rgba(255，0，0，.8);
transform: translate(50px，100px);
}
2，rotate()旋转
3，scale()缩放
scale方法用于元素放大缩小。scale(2,3)指的是x轴放大2两倍，y轴放大3倍。我么知道html的文字最小为12px，要想使字体更小，使用scale()放下缩小即可。
4，skew()倾斜
5，3D转换之rotateX()
6，3D转换之rotateY()
7，translate3d()
实现元素上下左右漂浮。
.box:hover{
box-shadow: 0 15px 30px 10px rgba(e,e,e,0.5);
transform: translate3d(0,-10px,0);/*z,y,z */
}
六，过渡transition
过渡：让元素从一种样式到另一种样式，从而实现动画的效果，他需要时间进行触发。他的属性值如下：
七，动画animation
动画能够更加精准地控制样式过渡效果。可以从第一种样式到第二种样式再到第三种样式，利用所占百分比来确定每个过渡所占用的时间。
1，@keyframes创建动画
name是动画名字。percent是到哪个百分比停止当前进入到下一个样式。
2，animation执行动画
八，绘制特殊图形
将元素的width和height设置为0，利用border属性和transparent属性值进行绘制。
.box{
width: 0;height: 0;
border-top: 100px solid transparent;
border-right: 100px solid rosybrown;
border-bottom: 100px solid transparent;
border-left: 100px solid transparent;
}
I
上面的代码可以绘制三角形。
九，媒体查询
这里的媒体是指：各种应用前端技术的设备信息。媒体查询是指：自动获取当前设备的屏幕信息，以便于采用渲染方式，使同一种样式在不同设备上显示出不同的效果。
1，设置meta标签
一般这个标签不用我们写，一般的ide会自动补全。
2，媒体查询语句
@media screen and (max-width: 768px) {
*设备小于768px加载样式，语法是：and + (属性)*/
body{
background-color: red;
}
}
@media screen and (max-width: 992px) and (min-width: 768px){
*设备小于768px但小于992px加载样式*/
body{
background-color: pink;
}
}
@media screen and (min-width: 992px) {
*设备大于992px加载样式*/
body{
background-color: green;
}
}
依次对应手机，平板，显示器的屏幕，之后还会有折叠屏手机的css布局形式。
十，响应式布局
响应式布局是一种设计思维，他与媒体查询大同小异，功能差不多。因为现在手机，电脑，物联设备等设备的显示屏大小不一，我们可以为这些设备各自开发一套界面，也可以让渲染引擎自动选择去显示。
响应式局部就是让一套代码能够在不同设备上显示，通过隐藏或者缩小相关元素来实现整个网页的功能完整性和美观性。
十一，栅格系统
栅格系统是媒体查询的具体实现，是一种规定的写法，能够最小限度保证在各个设备上的显示美观性。
当我们拿到一张很大的纸，我们估计会从左上角开始，从左往右进行绘画。如果我们拿到一张像手机屏幕一样的纸，那该怎么办？最佳方案就是：从上往下画。这就是栅格系统。
我们可以直接使用bootstrap的grid.css来实现栅格系统。
十二，多列
多列可以让文本内容像报纸一样进行排版布局。
1，创建多列
2，设置每列之间的间隙
3，列边框
属性简写:
多列网页展示。
