码迷,mamicode.com
首页 > Web开发 > 详细

CSS3新添加的属性

时间:2015-04-24 15:56:30      阅读:121      评论:0      收藏:0      [点我收藏+]

标签:

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); 

  

CSS3新添加的属性

标签:

原文地址:http://www.cnblogs.com/zzq-include/p/4453274.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!