CSS3学习笔记

一、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;
}