CSS3
一.选择器
/*子元素选择器*/
div>font>b{ color: red; }
/*紧跟相邻的同级元素 (一个元素)*/
div+font{ color: yellow; }
/*在div元素之后的同级P元素 （多个元素）*/
div~p{ color:blue; }
/*属性选择器*/
input[type="text"]{ color: red; }
/*所有href中含有baidu的*/
a[href*="baidu"]{ color: aqua; }
/*以http开头的A标签*/
a[href^="http"]{ font-weight: 900; }
/*以baidu结尾的A标签*/
a[href$="baidu"]{ border: 1px solid saddlebrown; }
/* :root 根元素 *>root>html*/
/*empty 当元素内容为空时被选中*/
li:empty{ width: 0px; height:0px; }
/*nth-child(n)规定元素 n可以是数字和倍数(2n) n+ 表示大于第一个元素*/
.ul li:nth-child(2n){ background-color: coral; }
/*最后一个标签*/
.ul li:last-child{ background-color: red; }
/*第一个标签*/
.ul li:first-child{ background-color: blue; }
/*属于父元素中唯一子元素的p元素*/
.ul li:only-child{ border: 3px solid black; }
/* :after 插入元素后端 （必须指定 content：属性 转换为块状元素）*/
/* :before 插入元素前段 （必须指定 content：属性 转换为块状元素）*/
/* X :not(selector) 选择除了（）中选择器之外的标签元素。 记得在冒号前加空格*/
二.@font-face实现个性化字体
eg:
/*创建字体*/
@font-face { font-family: my_font; src: url("fonts/huawen.ttf"); } /*引用字体*/
p{ font-family: my_font; }
三.英文换行
word-wrap:reak-word;
四.em or px
1em=16px 并且em是父类的倍数
1. em的值并不是固定的; 2. em会继承父级元素的字体大小。 1px=0.0625em
【 rem 任何时候都是相对于（html)根元素 的倍数 ●设置根元素的字体大小：（通用的） var deviceWidth = document.documentElement.clientWidth; document.documentElement.style.fontSize = deviceWidth/6.4（设计稿的宽度/100） +"px"; //此个设计稿的宽度是640像素是，除以6.4
直接用设计稿量出来的宽度和高度除以100，得到的就是rem做单位时的值 200px = 2rem; 50px = 0.5rem 】
五.盒子阴影、字体阴影
/*水平阴影的位置,垂直阴影的位置，模糊距离，阴影的尺寸，阴影的颜色，将外部阴影 (outset) 改为内部阴影；*/ box-shadow: -2px 2px 2px 2px red；
字体阴影：text-shadow：x轴偏移量，y轴偏移量，投影长度，颜色；
六。CSS3背景图片-clip origin
*从内边框加入图片 适用于不包括外边框的距离时使用*/（要写在背景图片下面，有执行顺序） /*background-clip: padding-box;*/ /*背景图片内容开始加入*/ background-clip: content-box;
/*background-origin 属性规定背景图片的定位区域 必须有no-repeat才有效*/ background-origin: content-box;
◆CSS3 盒模型 box-sizing： border-box； div中设置的宽高跟border的宽度无关，常用的
七。渐变效果
1.直线 /*background:-webkit-gradient(linear,0 0,0 100%,from(red), to(blue));*/ background:linear-gradient(left,red,pink); background:-webkit-linear-gradient(left,red,pink); background:-moz-linear-gradient(left,red,pink); background:-o-linear-gradient(left,red,pink); background:-ms-linear-gradient(left,red,pink); 2.圆形 background:radial-gradient(red 20%,yellow 30%, blue 40%,green 50%,pink 60%); background:-webkit-radial-gradient(red 20%,yellow 30%, blue 40%,green 50%,pink 60%); background:-moz-radial-gradient(red 20%,yellow 30%, blue 40%,green 50%,pink 60%); background:-o-radial-gradient(red 20%,yellow 30%, blue 40%,green 50%,pink 60%); background:-ms-radial-gradient(red 20%,yellow 30%, blue 40%,green 50%,pink 60%);
八。背景图片
background-size: auto | <长度值> | <百分比> | cover | contain 1、auto：默认值，不改变背景图片的原始高度和宽度；
2、<长度值>：成对出现如200px 50px
3、<百分比>：0％~100％
4、cover：覆盖，即将背景图片等比缩放以填满整个容器；
5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。
九。设置边框图片
.div1{ width:200px; height:200px; border:27px solid red; -webkit-border-image: url("images/pic1.png") 27 27 stretch repeat; -moz-border-image: url("images/pic1.png") 27 27 stretch repeat; }
引入边框图片，截取一个角的大小 相应的四个角就会出来，X轴重复方式 stretch拉伸 repeat重复 round平铺，Y轴重复方式
十。动画
1.移动：transform:translate(0,200px); 移动 （x轴，y轴） 2.旋转：transform:rotateY(xx deg); 按Y轴旋转的度数，单位dag 3.放大：transform: scale(2,4);（X轴倍数）和（Y轴倍数） 4. 倾斜：transform:skew(30deg); 倾斜点为图片中心 eg：
5.alternate 动画在奇数次正向播放，在偶数次反向播放。 alternate-reverse动画在奇数次反向播放，在偶数次正向播放。 infinite指定动画应该播放无限次（永远）（若此处写数字，则播放数字的次数） 例如：-webkit-animation: img 2s forwards infinite alternate;
eg: /*创建动画*/ @keyframes first { from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } img{ /*调用 （动画名称，画耗费时间“s”,速度曲线 , 播放次数 "n"或者infinte循环，轮流反向alternate)*/ animation: first 2s linear infinite ; } 6.transform-origin:基准线 设置倾斜点 单位px eg：transform-origin:10px,10px;
第一个参数表示相对左上角原点水平方向的距离 可以是（left、center、right） 第二个参数表示相对左上角原点垂直方向的距离 可以是（top、center、bottom）
7.canvas画布：详细详情动画css3
十一。多栏布局
1. 分几栏
column-count:2;
2.每栏宽度
column-width:200px;
columns:column-width column-count
3.设定多栏之间间隔
column-gap:20px;
4.设定多栏之间分隔线
column-rule:1px solid red;
5.跨列设置
column-span : none | all;
