CSS续
一、CSS3新特性：
注意：在使用CSS3新属性时，可以给CSS3样式加上各大厂商的前缀，来兼容不同浏览器（“浏览器内核”负责对网页语法的解析，内核分为渲染引擎和Js引擎）
浏览器内核 前缀 浏览器
a、Gecko -moz- 火狐
b、Webkit（谷歌目前已经弃用） -webkit- 谷歌、苹果
c、Trident -ms- IE
d、Presto（欧朋目前已经弃用） -o- opera（欧朋）
e、blink 目前谷歌和欧朋）
1、CSS3选择器（属性选择器、兄弟选择器、伪对象选择器);（详见上一篇）
2、弹性盒 display:flex;（详见上一篇）
3、圆角 border-radius:;
1) border-radius : value ; 四个角（value中填像素或百分比，当盒子为正方形时如果填50%，则变成圆，当盒子为矩形时填50%，为椭圆）
2)border-radius : value value ; 左上角 右下角
3)border-radius : value value value value ; 左上角 右上角 右下角 左下角
注意：如果只要两边变圆，则value取高的一般像素
4、阴影
盒阴影：
box-shadow : 水平方向的位置 垂直方向的位置 模糊度 扩展值 颜色 阴影位置;
(正右偏，负左偏) (正下，负上) (正值，值越大越模糊) (正变大，负变小) (默认值是外阴影outset ，也可以设置为内阴影);
字阴影：
text-shadow : 水平方向的位置 垂直方向的位置 模糊度 颜色;
(正右偏，负左偏) (正下，负上) (正值，值越大越模糊）
注意：a、如果要左右和下边有阴影，则,如：box-shadow:0 15px 30px ;(下边有阴影，左右淡色阴影通过模糊度撑开)
b、如果box-shadow:0 0 30px rgba(0,0,0,.2); ，则水平和垂直都没有，四周淡色阴影由模糊度撑开
5、2D转换（transform）:使元素在形状上或者位置上发生一定的改变
(有时如果需要动画的元素需要进行变换，建议把该元素进行脱离文档流)
位移
（1）Transform:translate(x,y) x取正值朝右边移动，y取正值朝下移动（当translate中只取一个值，代表水平方向,正右，负左）
（2）Transform:translateX(30px) 向右移动30px
（3）Transform:translateY(30px) 向下移动30px
旋转
（1）transform:rotate(60deg);里面填度数，单位是deg，取正值顺时针旋转，取负值逆时针旋转
（注意：旋转会旋转整个坐标轴，默认旋转的中心点是整个形状的中心，即宽高的一半。可以修改默认的旋转中心点，通过transform-origin:left top;修改中心点）
（2）transform:translate(20px,20px) rotate(60deg); 先位移再旋转
transform:translate(20px,20px) rotate(60deg); 先旋转在位移
上述区别总结：旋转会旋转整个坐标轴（一般情况，如果要旋转，把旋转写在位移的后面）
（3）transform:rotateX(60deg) 指绕着水平X轴旋转
（4）transform:rotateY(60deg) 指绕着垂直Y轴旋转
缩放
（1）transform : scale(x,y) ; 取值0~1缩小，>1放大，当其中放一个值时等比例缩放
（2）transform : scaleX() ; 水平方向上的缩放
（3）transform : scaleY() ; 垂直方向上的缩放
倾斜
（1）transform : skewX(30deg) ;
（2）transform : skewY(30deg) ;
（3）transform : skew(xdeg,ydeg) ; 取一个值代表水平方向，两个值代表水平盒垂直
6、背景渐变
（1）线性渐变
background: linear-gradient(to top,red,yellow);
如：
background:linear-gradient(red , pink , palegreen , paleturquoise); 默认由上向下
background:linear-gradient(to right , red , pink , palegreen , paleturquoise ); 朝右
background:linear-gradient(to right bottom , red , pink , palegreen , paleturquoise); 朝右下
（2）径向渐变
background: radial-gradient(top,circle,red,yellow);
如：
background: radial-gradient(red,pink,palegreen,paleturquoise); 默认由中心向周围
background:-webkit-radial-gradient(top,red,pink,palegreen,paleturquoise);由上向周围
background:-webkit-radial-gradient(top left,red,pink,palegreen,paleturquoise);由左上向周围
background:-webkit-radial-gradient(top left, circle，red,pink,palegreen,paleturquoise); 由左上向周围，渐变形状为圆
7、过渡
特点：1、指通过触发事件从一种样式平滑的过渡到另外一种样式（触发事件，如：点击，悬浮等）
2、只能做点到点的简单动画
语法：
简写：transition : 过渡的属性 过渡的持续时间 过渡的速度变换类型 过渡延迟 ；
颜色 ms/s linear (匀速) ms/s
数值（宽高....） ease（默认值，先加速后减速）
阴影 ease-in（加速效果）
转换（transform） ease-out（减速效果）
背景渐变 ease-in-out（先加速后减速）
如：transition : all 1s (这里的all指所有需要变换后的属性) 这句写在需要调用过渡的CSS样式中
属性单写：
transition-property:;
transition-duration:;
transition-timing-function:;
transition-delay:;
8、animation动画：通过控制每一帧，可以制作复杂动画
（1）设置动画
语法：
@keyframes name（自定义）{
from/ 0%{
Css样式
}
percent{
Css样式
}
to/100%{
Css样式
}
}
(2）调用动画 （在想调用动画的样式中添加）
语法：
简写：animation : 动画名字 动画持续时间 速度变化类型 播放次数 播放方向 forward ；
name s/m linear number alternate 动画停在最后一帧,不然默认值停回初始状态
ease infinite(无限)
ease-in
ease-out
ease-in-out
属性单写：
二、CSS Hack（主要针对IE版本浏览器）
优点：解决CSS样式兼容IE低版本问题，低版本的IE浏览器，如IE6、IE7、IE8
缺点：大规模使用CSS Hack会带来维护成本的提高以及浏览器版本变化而带来类似Hack失效等系列问题，即对当前版本起作用的hack，也许升级一下，界面又乱了
（即尽量找通用方法，减少使用CSS Hack）
1、条件注释：
（1）<!--[if IE 9]>
<style>
div{ color : blue } //在IE9下，字体颜色为蓝色
</style>
<![endif]-->
（2）<!--[if IE]>
<p>只能在IE浏览器上看见这段文字</p> //只能在IE浏览器上看见这段文字
<![endif]-->
（3）<!--[if gt IE 6]>
<style>
<span>这段文字只能在大于IE6版本上出现</span> //<span>这段文字只能在大于IE6版本上出现</span>
</style>
<![endif]-->
总结上述：
条件注释的语法：<!--[if 条件]>
代码块；
<![endif]-->
其中“条件符号”有：
大于 gt
大于等于 gte
小于 lt
小于等于 lte
非指定版本 ！
2、属性前后缀：
(1)”_”减号是IE6专有的hack
(2)”9”IE6/IE7/IE8/IE9/IE10都生效
(3)” ”IE8/IE9/IE10都生效，是IE8/9/10的hack
(4)”9 ”只对IE9/IE10生效，IE9/10的hack
设定优先级最高 , 在后面加上!important：如background-color:red !important;
三、媒体查询（以原生代码写响应式布局，编写一次代码适应于多屏幕尺寸终端）
其中：max-width => 包括等于
实例：
注意：在头部加入<meta name=”viewport” content=”device-width , initial-scale=1”>
(为了使电脑上的Chrome或者其他浏览器能够支持手机模式，不然只支持pad端)
<head>
<style>
/*PC端开始*/
@media screen and (min-992px){
body{
background-color:pink;
}
}
/*PC端结束*/
/*iPad端开始*/
@media screen and (min-769px) and (max-992px){
body{
background-color:purple;
}
}
/*iPad端结束*/
/*移动端开始*/
@media screen and (max-768px){
body{
background-color:blue;
}
}
/*移动端结束*/
</style>
</head>
书写规则：
在书写响应式布局中，宽度尽量用百分比表示（以方便各种屏幕大小的比例），高度视情况而定。在开始书写响应式布局时，首先按照PC页面的比例开始编写，书写完PC端布局之后，将移动端，pad端和PC端显示中有区别部分的代码段，分别放入各自的@media中，经过各自需求的更改，就完成了。
四、其他
1、悬浮图标显示
cursor : pointer ; 把鼠标箭头图标显示转换成小手图标显示
cursor : wait ; 把鼠标箭头图标显示转换成等待的圆圈图标显示
2、字体图标
（1）借助阿里巴巴矢量图库
第一步：将需要的图标加入购物车；
第二步：对购物车中的图标点击“下载代码”，获得压缩包；
第三步：打开压缩包之后，选取“iconfont.css , iconfont.eot , iconfont.svg , iconfont.ttf
iconfont.woff , demo_unicode.html”放入项目的css文件夹（其中以.woff .ttf .svg . eot为后缀的文件，是为了兼容各个浏览器的）
第四步：引入时在head中加入<link rel=”stylesheet” href=”url”>
如：<i class=”iconfont”>十六进制</i>
