css3新特性

一、css3新增边框属性

1.border-color:为边框设置多种颜色

       P{                                
           Border-style: solid;               
           Border-color: #fff0000  #0000ff    
         } 

需要注意的是border-width属性如果单独使用是不会起作用的，请首先使用“border-style”属性来设置边框

2.border-image：图片边框

    div {                                           
         Border-imge: url(border.png) 30 30 round;       
       }                                           
 注意：ie不支持order-image属性；border-image属性规定了用户边框的图片

3.Boeder-radius:圆角边框

  div {              
      Border:2px solid;
      Border-radius:2px;
     }

4.box-shadow:阴影效果 （用于边框加阴影）

  div {                          
     Box-shadow:10px 10px 5px #888
     }                          

二、背景属性

1.background-size:指定背景图片尺寸

div {                      
    background:url(图片路径);
    background-size:80px 60px;
background-repeat:no-repeat; // 属性设置是否及如何重复背景图像 
    } 

repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置。
如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度

2.background-origin:指定背景图片从哪里开始显示

  背景图片可以放置于content-box,padding-box或border-box区域
  Content-box:背景图像相对于内容框来定位的
  Border-box:背景图像相对于边框来定位的
  Padding-box：相对于内边框来定位的

3.Background-clip:指定背景图片从什么位置开始裁剪的

  （同上）
       背景被裁剪到内容框
       边框盒
       内边距框

三、文字效果

1.text-shadow：文本阴影

   Text-shadow: h-shadow v-shadow blur color;
   h-shadow：必需，水平阴影的位置允许复制 px
   v-shadow: 必需，垂直的阴影位置允许负值 px
   blur：可选，模糊的像素 px（不写，默认半径为0）
   Color： 可选 阴影颜色(不写，就是以文字颜色一样)
   此属性可以是以逗号分割，添加多个阴影

这些阴影效果有可能会互相重叠，但不会叠加文本本身，也可能会跑到容器边界之外，但不会影响容器的大小

2.word-wrap:自动换行

 word-wrap：normal | break-word
 normal，浏览器默认的
 break-word：自动换行

四、动画效果

1.transform变换效果：可以将元素实现旋转，缩放，平移

2.animation动画效果

3@keyframes 规定动画

语法
@keyframes animationname {keyframes-selector {css-styles;}}
animationname 必需值。定义动画的名称。
keyframes-selector 必需值。动画时长的百分比。
css-styles 必需值。一个或多个合法的 CSS 样式属性。

 @keyframes donghua{

0%{

transform: translate(0,0);

}

50%{

transform: translate(500px,0);

}

100%{

transform: translate(500px,500px);

}

以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%
0% 是动画的开始时间，100% 动画的结束时间。

五、过渡效果

1.transition过渡效果

transition: all 2s