css 3 新增属性

css3新增属性：1.text-shadow , 2.box-shadow, 3.background, 4.border-radius, 5.rgba（透明度）， 6.border-image, 7.媒体查询， 8.word-wrap ， 9. font-face ，10.transition（过度）， 11.transform(2D属性)， 12.animation（动画）

，

一.text-shadow//
text-shadow:(左右平移  +右  -左)  (上下平移 +下 -上)  (模糊距离 0~无限) (颜色);
text-shadow:10px  10px  5px #999;

二.box-shadow
text-shadow:(左右平移  +右  -左)  (上下平移 +下 -上)  (模糊半径 0~无限，) (阴影扩展半径 负无限~正无限，阴影放大缩小) (颜色) 内外阴影(默认值：外，inset：内);
text-shadow:10px  10px  5px  5px #999 inset;

三.background
background-image：设置元素的背景图像。

background-origin：规定背景图片的定位区域。

background-size ：规定背景图片的尺寸。

background-repeat：设置是否及如何重复背景图像。

四.border-radius
border-radius:10px 20px 30px 40px;

五.rgba
background-color:rgba(225,225,225,0.2);

六.border-image
border-image: 边框设置图片

七.媒体查询
@media(max-width:200px){
   div{
      background:red; 
  }
}

八.word-wrap
word-wrap 属性允许长单词或 URL 地址换行到下一行。
注：所有主流浏览器都支持 word-wrap 属性。
基础语法：word-wrap: normal|break-word;

九.font-face
font-face属性：定义自己的字体

十.transition
transition: 要过渡的属性   花费时间    运动曲线  何时开始;

3. 运动曲线
默认是ease (可以省略)
linenr                                             匀速
eare                                               逐渐慢下来
eaer in                                           加速
eaer out                                         减速
eae-in- out                                     先加速后减速

.son {
  width: 200px;
  height: 200px;
  background: red;
  transition: all 1s linear 0.5s;
}
.son:hover {
  width: 100%;
  background: yellow;
}

十一.transform( 2D 属性)
 transform：实现元素的位移，旋转，缩放等效果;
1.translate (位移)
  transform: translate(200px, 200px);
2. rotate（旋转）
transform: rotate(40deg);
3. scale（缩放）
 transform：scale（x，y）；

综合写法
transform：translate()  rotate()  scale() ;

十二.animation 动画 
@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(100px, 100px);
  }
  100% {
    transform: rotate(123deg);
  }
}
.son {
  width: 100px;
  height: 100px;
  background: red;
  animation: move;
  animation-iteration-count: infinite;
  animation-duration: 8s;
}

image.png