HTML5+CSS3

创建时间：2017-03-03

HTML5标签

移动端meta标签，宽高自动1:1缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

width=device-width 设备官渡640px(低版本的安卓手机不支持数字) 这个属性不支持IE

initial-scale=1.0 能够起到和width=device-width相同的效果（把理想的视窗设备为设备的宽度）

width=device-width initial-scale=1.0 两个配合使用就能够很好的解决移动端各设备的适配问题

maximum-scale=1.0 最大缩放比例

user-scalable=0 禁止缩放

minimum-scale=1.0 最小缩放比例

input属性，用来提示

<input placeholder="账号" type='text'/>

CSS3

css3新增单位

rem

em是根据父元素的字体大小变化，缺点是你设置em的时候，你还要知道父元素的字体大小

rem 是根据根元素<html>的字体大小变化而变化，只要html的字体发生改变，运用了rem的尺寸都会发生改变

vh | vw 相对于viewport理想视窗（设备）的比例（兼容性不好）

10vw = 10%设备宽

CSS3兼容性处理

-moz-/*兼容火狐浏览器*/-webkit-/* 兼容谷歌浏览器*/-ms-/* 兼容IE */

CSS3动画

div{animation: myfirst 5s;-webkit-animation: myfirst 5s;}/*绑定my动画，以及做兼容性处理*/

@keyframes my{/*定义my动画*/

    0%   {left:0px;}    100% {left:200px;}

}

CSS3渐变

从上到下，红色到蓝色

  background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(red, blue); /* 标准的语法 */

从左上角开始（到右下角）的线性渐变，红色到蓝色

  background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */

从左到右，红色到蓝色

  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, red , blue); /* 标准的语法 */

角度渐变，红色到蓝色

  background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(180deg, red, blue); /* 标准的语法 */

带透明度渐变

  background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */
  background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/
  background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Firefox 3.6 - 15*/
  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */

CSS3块元素阴影操作

对象选择器 {box-shadow:{可选，默认外阴影} X左右移动像素距离{必填} Y上下移动像素距离{必填} 阴影羽化范围{可选} 阴影的大小{可选} 阴影颜色{可选}}

div{box-shadow:3px 3px 10px 10px #f00;}//外阴影效果div{box-shadow:inset 3px 3px 10px 10px #f00;}//内阴影效果

CSS3旋转

div{transform:rotate(120deg);}

CSS3媒体查询

@media screen and (max-width:640px){/*如果页面小于宽度640px，执行里面的样式*/

    div{width:1000px;}

}
@media screen and (max-width:360px){{/*如果页面小于宽度360px，执行里面的样式*/

    div{width:360px;}

}

CSS3 nth-child选择器，参数可以给数字，相当于下标

下面例子用CSS3就可以做到隔行换背景色

div:nth-child(odd){/*表示奇数*/    background:#ff0000;

}

div:nth-child(even){/*表示奇数*/    background:#0000ff;

}

上一篇：佛祖保佑，永无BUG

下一篇：canvas的基本操作