一、CSS3属性选择器
我们以前学过类选择器、ID选择器、标签选择器、关联选择器、组合选择器、伪类选择器。CSS3中新增了属性选择器：
/*有class属性的input标记*/ input[class]{ background-color:#ccc; } /*class为first的input标记*/ input[class=’first’]{ background-color:#ccc; } /*class为first的所有标记*/ [class=’first’]{ background-color:#ccc; } /*name以first打头的input标记*/ input[name^=first]{ background-color:#ccc; } /*name以name结尾的input标记*/ input[name$=name]{ background-color:#ccc; } /*name包含stna的input标记*/ input[name*=stna]{ background-color:#ccc; }
二、CSS3伪类选择器
在CSS2的时候我们学过伪类 :hover、:link、:active、:visitied
CSS3新增的伪类选择器
e:first-child e的父元素的第一个子元素（并不是e的第一个子元素）
e:last-child e的父元素的最后一个子元素
:root 文档的根元素，相当于html
e:nth-child(n) e的父元素的第n个子元素
e:nth-last-child(n) e的父元素的倒数第n个子元素
e:empty 不包含任何子元素的元素
e:enabled 可用的元素
e:disabled 不可用的元素
e:checked 选中的元素
三、CSS3伪对象选择器
:before 在盒子内部的前面插入一个行显示的盒子
:after 在盒子内部的后面插入一个行显示的盒子
这两个选择器必须和content一起使用，即使没有内容插入也要写一个空字符串
#poem:before{ content:'锄禾日当午，'; display:inline-block; /*行内显示的盒子设置宽度不起作用*/ width:150px; } #poem:after{ content:'，谁知盘中餐'; width:200px; display:inline-block; }
<div id=’poem’>汗滴禾下土</div>
四、垂直居中(CSS2)
#content{ width:300px; height:300px; border:#000 solid 1px; margin:auto; display:table; /*将父元素当成一个表格，垂直居中才有效*/ } #child{ border:#000 solid 1px; text-align:center; display:table-cell;/*将子元素当成一个单元格，垂直居中才有效*/ vertical-align:middle; }
五、圆角矩形
div{ width:200px; height:200px; border:#000 solid 1px; } div:first-of-type{ /*div类别的第1个元素*/ border-raduis:20px; /*4个角的半径都是20px*/ } div:nth-of-type(2){ /*div类别的第2个元素*/ border-raduis:20px 40px; /*左上右下半径20px 左下右上半径40px*/ } div:nth-of-type(3){ /*div类别的第3个元素*/ border-raduis:20px 40px 60px; /*左上半径20px 左下右上半径40px 右下半径60px*/ } div:nth-of-type(4){ /*div类别的第4个元素*/ border-raduis:20px 40px 60px 80px; /*左上半径20px右上半径40px 右下半径60px 左下半径80px*/ } } div:nth-of-type(5){ /*div类别的第5个元素*/ border-raduis:50%; /*显示为圆形*/ }
六、阴影的制作
box-shadow 水平阴影 垂直阴影 虚化值 阴影大小 阴影颜色 阴影类型【内阴影或外阴影】
#content{ width:200px; height:200px; border:#000 solid 1px; border-radius:10px; box-shadow:3px 3px 3px 3px #666;/*内阴影加上inset，默认为outset*/ }
七、2D转换之移动
在CSS2中，使一个div屏幕居中要写很多代码实现，在CSS3中只需如下代码：
div{ width:200px; height:200px; background-color:#ccc; position:absolute; left:50%; /*只设置left和top为50%，div的位置偏离了屏幕中心点*/ top:50%; transform:translate(-50%,-50%);/*左调整div宽度的50%，上调整div高度的50%*/ }
八、2D转换之旋转
div{ width:200px; height:200px; background-color:#ccc; margin:100px auto; transform-origin:top left;/*以左上角为中心点旋转（默认以div的中心旋转）,top和left没有先后顺序*/ } div:hover{ transform:rotate(45deg);/*deg表示度数*/ }
九、2D转换之缩放
div{ width:200px; height:200px; background-color:#ccc; margin:100px auto; } div:hover{ /*transform:scale(0.5);*/ /*x轴和y轴各缩放50%*/ /*transform:scaleX(0.5);*/ /*x轴缩放50%*/ transform:scale(2,3); /*x轴和y轴各缩放200%和300%*/ }
十、2D转换之斜切
div{ width:200px; height:200px; background-color:#ccc; margin:100px auto; } div:hover{ /* transform:skewX(20deg);*/ /*在x轴上斜切20度*/ transform:skewY(20deg); /*在y轴上斜切20度*/ }
例题：下拉三角的实现
div{ width:300px; height:40px; border:#5c5c5c solid 1px; margin:100px auto; position:relative; /*使子节点的div相对于父节点绝对定位，而不是相对于屏幕左上角绝对定位*/ } div:after{ content:''; width:12px; height:12px; display:block;/*不设置为block的话div高度和宽度设置不起作用*/ border-right:#5c5c5c solid 2px; /*只设置两个边框，再进行旋转45度，就得到向下箭头的形状*/ border-bottom:#5c5c5c solid 2px; position:absolute; top:50%; right:12px; transform:translateY(-50%) rotate(45deg); /*2d转换移动。旋转45度,得到向下箭头的形状*/ } div:hover{ border:#000 solid 1px; /*获得焦点时边框颜色改变*/ } div:hover:after{ border-right:#000 solid 2px; /*获得焦点时向下箭头颜色改变*/ border-bottom:#000 solid 2px; }
十一、过渡动画
transition: transition-property transition-duration transition-timing-function transition-delay
transition-property规定设置过渡效果的 CSS 属性的名称（一般用all）
transition-duration规定完成过渡效果需要多少秒或毫秒
transition-timing-function规定速度效果的速度曲线（默认为ease）
transition-delay定义过渡效果何时开始（默认为0）
transition-timing-function的属性值有linear（匀速）、ease（逐渐慢下来）、ease-in（加速）、ease-out（减速）、ease-in-out（先加速再减速）
例：渐变改变div的宽度
div{ width:300px; height:200px; border:#000 solid 3px; margin:100px auto; background-color:#5c5c5c; border-radius:15px; transition:width 0.5s ease 0s; /*立即(0s后)渐变改变宽度,渐变花费0.5秒时间*/ } div:hover{ width:350px; height:250px; background-color:#ccc; }
例：图像的旋转
img{ border:#000 solid 2px; width:300px; height:200px; margin:100px auto; display:block; /*设置为块显示margin才能居中*/ border-radius:50%; /*显示为圆形*/ transition:all 2s; /*2秒内渐变旋转*/ } img:hover{ transform:rotate(360deg);/*旋转360度*/ }
例：鼠标移到图片上图片放大
div{ width:300px; height:240px; border:#000 solid 1px; margin:100px auto; overflow:hidden;/*放大图片超出的部分隐藏不显示*/ } div img{ width:300px; height:240px; cursor:pointer; } div img:hover{ transform:scale(1.1);/*放大1.1倍*/ transition:all 0.5s; /*0.5s内渐变放大*/ }
十二、3D转换之X轴旋转
X轴的旋转就像单杠的旋转
div{ width:400px; height:200px; border:#000 solid 1px; margin:100px auto; perspective:400px;/*透视效果，必须在父元素上添加*/ } div img{ width:400px; height:200px; } div:hover img{ transform:rotateX(60deg); transition:all 1s; }