**-----走进CSS3-----**


   1、CSS特性: 


(1)CSS 用于控制网页的样式和布局。


(2)CSS3 是最新的 CSS 标准。


   注:W3C的CSS3规范仍在开发。但是,许多新的CSS3属性已在现代浏览器使用。


======================================================================


   2、CSS3常用--实用属性:


(1)CSS边框:


CSS3 圆角:

   border-radius:15px;


CSS3盒阴影:

  box-shadow:10px 5px gray;


CSS3边界图片:

   border-p_w_picpath:url(border.png) 5 5 stretch;/**持续的*/

   border-p_w_picpath:url(border.png) 5 5 round;/**圆形、弧形*/

=====================================================================


(2)CSS3 背景:


background-p_w_picpath:背景图片

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

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

             border-box;padding-box;content-box;

background-clip:规定背景的绘制区域。背景剪裁属性是从指定位置开始绘制

             border-box;padding-box;content-box;

======================================================================


(3)CSS3渐变:


*默认从上到下渐变:

background:linear-gradient(red,blue,yellow,green);

height:200px;

width:200px;

**从左至右渐变:

background:linear-gradient(to left,red,blue,yellow,green);

height:200px;

width:200px;

***从左上角开始渐变:

background:linear-gradient(to left top,red,blue,yellow,green);

height:200px;

width:200px;

========================================================


(4)CSS3 的文本阴影:


text-shadow属性:适用于文本阴影


 例:text-shadow:5px 5px 5px red;

===========================================================


(5)CSS3--2D效果:


例:

#div6{

background-color:blue;

width:100px;

height:100px;


}

#div7{

background-color:red;

width:100px;

height:100px;

transform:skew(30deg,20deg);

}

============================================================


(6)CSS3--图片圆角效果:


img{

border-radius:15px;

}


===========================================================