CSS3新特性

CSS3新特性

• 1.圆角边框

  border-radius:10px
  

• 2.盒子阴影

  box-shadow:阴影类型(可省inset内阴影，不写就是默认外阴影) X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径（可省，写可充当边框） 阴影颜色
  

box-shadow:10px（x位移） 10px（y位移） 5px（模糊距离） #333（阴影颜色）

• 3.图片边框

  border-image:url 30（向内偏移） 30（宽度） round/strech（平铺/拉伸）  可设多个背景图url
  

• 4.背景图片大小

  background-size:像素或百分比（百分比相对于父元素的宽高）
  

• 5.背景图片的定位区域

  background-origin：content-box / padding-box / border-box
  

• 6.文字阴影

  text-shadow:水平位移 垂直位移 模糊距离 阴影颜色
  

• 7.word-wrap

  word-wrap：break-word 允许长单词或url地址换行到下一行
  

• 8.@font-face

@font-face{
  font-family: sonyaFont;
  src:url('sonya.ttf'),url("sonya.eot");
}
div{
  font-family: sonyaFont;
}

@font-face中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。

• 9.转换

transform:translate(x,y) 根据x(left)，y(top)坐标移动

transform:rotate(30deg)  顺时针旋转给定度数（负数则逆时针）

transform:scale(x,y) x轴、y轴缩放或扩大的倍数

transform:skew(30deg,20deg) 围绕x轴把元素反转30度，围绕y轴翻转20度

transform:ratateX(30deg) 3D旋转

• 10.过渡

transition: property duration timing-function delay;

transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

• 11.动画animation

@keyframes:要把动画效果捆绑在元素上 + 时长 + 方向 + 延时 + 重复

animation: name duration timing-function delay iteration-count direction;

animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

@keyframes sonya{
  from{
    background:red;
  }
  to{
    background:yellow;
  }
}
div{
  animation:sonya 5s;
}

• 12.多列布局

  column-width:列的最小宽度，默认auto
  column-count:3;  /*3列显示，最大列数*/
  co lumn-gap:40px;  /*列间隔*/
  column-rule:3px outset #f00  /*列边框 宽度 样式 颜色*/
  column-span：2px;
  

• 13.resize：both （可由用户调整元素尺寸）

• 14.box-sizing：content-box/border-box(正常盒子/IE盒子)

• 15.outline 在边框border外15px处绘制一个2px红色线性轮廓

  outline:2px solid red
  outline-offset:15px
  

  轮廓和边框不同，轮廓不占空间，可能是非矩形

• 16.渐变 gradient:线性渐变（上下左右方向） 径向渐变（由中心定义）

• 17.新的选择器

  :nth-child(n)  从1开始
  :nth-last-child(n)
  :last-chid
  :disabled
  querySelector():接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。
  querySelectorAll():接收的参数也是CSS选择符，但是返回的是所有匹配元素,NodeList的实例,不会进行动态查询
  getElementsByClassName()：接收一个参数，这个参数也是CSS选择符的字符串，可以是一个也可以是多个。
  

• 18.flex box弹性布局

  flex-direction:子元素排列方式
  justify-content:主轴对齐方式
  align-items:纵轴对其方式
  flex-wrap:换行方式
  

• 19.媒体查询

  @media screen and (max-width: 1080px){
  body {
        background-color:lightblue;
    }
  }
  

详见：梦龙小站——CSS3