CSS3新添加的属性

1.圆角设置
  border-radius:15px 50px 30px 5px;

  /*四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下    角。

  三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角

  两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角

  一个值: 四个圆角值相同

*/

2.阴影设置
   box-shadow:100px 100px 80px #888888;/*四个参数依次:距左距离 距上距离 模糊程度(数值越大越模糊) 颜色   (text-shadow为文本阴影)*/
3.多背景设置
   background-image:url(xxx.gif),url(xxxxx.gif);/*支持多背景混合插入*/
4.渐变设置(IE9以上)
   过度渐变:
   background: -webkit-linear-gradient(red, blue, green); 
   background: -o-linear-gradient(red, blue, green); 
   background: -moz-linear-gradient(red, blue, green);
   background: linear-gradient(red, blue, green); /* 标准的语法(必须放在最后) 参数个数不限可多节点变色   默认为从上到下渐变*/ 

   background: -webkit-linear-gradient(left, red, blue); 
   background: -o-linear-gradient(left,red, blue); 
   background: -moz-linear-gradient(left,red, blue);
   background: linear-gradient(left,red, blue); /*left也可以写成(10deg以角度方式渐变) 从左到右渐变*/

   background: -webkit-linear-gradient(left top, red, blue); 
   background: -o-linear-gradient(left top,red, blue); 
   background: -moz-linear-gradient(left top,red, blue);
   background: linear-gradient(left top,red, blue); /*从左上到右下渐变*/

   径向渐变: 
   background: -webkit-radial-gradient(red, green, blue,yellow);
   background: -o-radial-gradient(red, green, blue,yellow); 
   background: -moz-radial-gradient(red, green, blue,yellow);
   background: radial-gradient(red, green, blue,yellow); 

  

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。