css3

边框

border-radius:圆角
box-shadow:水平阴影的位置 垂直阴影的位置 模糊距离 盒阴影
tet-shadow:h-shadow v-shadow bur clor
border-image:边界图片

　　

背景

background-size:背景图片的尺寸
background-origin：content-box、padding-box 或 border-box 区域；

　　

文本样式

text-shadow：文本阴影；
word-wrap:自动换行；

　　

字体引用

@font-face{
           font-fmily:"名字"
           src: url(“字体位置”)
}

　　

2D转换/3D转换

transform:
translate(top,left):从其当前位置移动;
rotate(30deg):顺时针旋转给定的角度；
scale(1.1):元素尺寸增加或减少;
skew(30deg,20deg):翻转给定的角度；
3D：
rotateX()：围绕X轴旋转；
rotateY():围绕Y轴旋转；

　　

过渡

transition:width 2s;

　　

 

动画

@keyframes创建动画

@keyframes myfirst

from{background:red;}

to{background:yellow;}

animation:动画名 2s

animate.css扩展文件

　　

 

多列

column-count:规定元素应该被分隔的列数;
column-gap 属性规定列之间的间隔;

@media选择器

head头部添加：<meta name="viewport" content="width=device-width, initial-scale=1.0">

否则手机设备会以980px为宽度；

@media screen and (max-width:300px){}

手机端做页面：vw单位和rem单位的使用

html的字体大小100/750*100;此处乘100是因为PC浏览器最小字体12px;

设计图像素/100rem