前端（三）
CSS续css
1、CSS3新特性：html
注意：在使用CSS3新属性时，能够给CSS3样式加上各大厂商的前缀，来兼容不一样浏览器（“浏览器内核”负责对网页语法的解析，内核分为渲染引擎和Js引擎）web
浏览器内核 前缀 浏览器浏览器
a、Gecko -moz- 火狐ide
b、Webkit（谷歌目前已经弃用） -webkit- 谷歌、苹果svg
c、Trident -ms- IE 布局
d、Presto（欧朋目前已经弃用） -o- opera（欧朋）字体
e、blink 目前谷歌和欧朋） flex
一、CSS3选择器（属性选择器、兄弟选择器、伪对象选择器);（详见上一篇）动画
二、弹性盒 display:flex;（详见上一篇）
三、圆角 border-radius:;
1) border-radius : value ; 四个角（value中填像素或百分比，当盒子为正方形时若是填50%，则变成圆，当盒子为矩形时填50%，为椭圆）
2)border-radius : value value ; 左上角 右下角
3)border-radius : value value value value ; 左上角 右上角 右下角 左下角
注意：若是只要两边变圆，则value取高的通常像素
四、阴影
盒阴影：
box-shadow : 水平方向的位置 垂直方向的位置 模糊度 扩展值 颜色 阴影位置;
(正右偏，负左偏) (正下，负上) (正值，值越大越模糊) (正变大，负变小) (默认值是外阴影outset ，也能够设置为内阴影);
字阴影：
text-shadow : 水平方向的位置 垂直方向的位置 模糊度 颜色;
(正右偏，负左偏) (正下，负上) (正值，值越大越模糊）
注意：a、若是要左右和下边有阴影，则,如：box-shadow:0 15px 30px ;(下边有阴影，左右淡色阴影经过模糊度撑开)
b、若是box-shadow:0 0 30px rgba(0,0,0,.2); ，则水平和垂直都没有，四周淡色阴影由模糊度撑开
五、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) ; 取一个值表明水平方向，两个值表明水平盒垂直
六、背景渐变
（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); 由左上向周围，渐变形状为圆
七、过渡
特色：一、指经过触发事件从一种样式平滑的过渡到另一种样式（触发事件，如：点击，悬浮等）
二、只能作点到点的简单动画
语法：
简写：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:;
八、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
属性单写：
2、CSS Hack（主要针对IE版本浏览器）
优势：解决CSS样式兼容IE低版本问题，低版本的IE浏览器，如IE六、IE七、IE8
缺点：大规模使用CSS Hack会带来维护成本的提升以及浏览器版本变化而带来相似Hack失效等系列问题，即对当前版本起做用的hack，也许升级一下，界面又乱了
（即尽可能找通用方法，减小使用CSS Hack）
一、条件注释：
（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
非指定版本 ！
二、属性先后缀：
(1)”_”减号是IE6专有的hack
(2)”\9”IE6/IE7/IE8/IE9/IE10都生效
(3)”\0”IE8/IE9/IE10都生效，是IE8/9/10的hack
(4)”\9\0”只对IE9/IE10生效，IE9/10的hack
设定优先级最高 , 在后面加上!important：如background-color:red !important;
3、媒体查询（以原生代码写响应式布局，编写一次代码适应于多屏幕尺寸终端）
实例：
注意：在头部加入<meta name=”viewport” content=”device-width , initial-scale=1”>
(为了使电脑上的Chrome或者其余浏览器可以支持手机模式，否则只支持pad端)
<head>
<style>
/*PC端开始*/
@media screen and (min-width:992px){
body{
background-color:pink;
}
}
/*PC端结束*/
/*iPad端开始*/
@media screen and (min-width:769px) and (max-width:992px){
body{
background-color:purple;
}
}
/*iPad端结束*/
/*移动端开始*/
@media screen and (max-width:768px){
body{
background-color:blue;
}
}
/*移动端结束*/
</style>
</head>
书写规则：
在书写响应式布局中，宽度尽可能用百分比表示（以方便各类屏幕大小的比例），高度视状况而定。在开始书写响应式布局时，首先按照PC页面的比例开始编写，书写完PC端布局以后，将移动端，pad端和PC端显示中有区别部分的代码段，分别放入各自的@media中，通过各自需求的更改，就完成了。
4、其余
一、悬浮图标显示
cursor : pointer ; 把鼠标箭头图标显示转换成小手图标显示
cursor : wait ; 把鼠标箭头图标显示转换成等待的圆圈图标显示
二、字体图标
（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>
- 1. web 前端（三）
- 2. 前端（三）
- 3. 前端三剑客-01前端简介
- 4. 前端基础(三)
- 5. My前端bootstrap（三）
- 6. 【前端】三个bug
- 7. 前端面试（三）
- 8. 前端学习（三）
- 9. 前端复习（三）
- 10. 前端两三问
- 更多相关文章...
- • WSDL 端口 - WSDL 教程
- • XSLT - 在客户端 - XSLT 教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • Docker容器实战(一) - 封神Server端技术
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. web 前端（三）
- 2. 前端（三）
- 3. 前端三剑客-01前端简介
- 4. 前端基础(三)
- 5. My前端bootstrap（三）
- 6. 【前端】三个bug
- 7. 前端面试（三）
- 8. 前端学习（三）
- 9. 前端复习（三）
- 10. 前端两三问