CSS3新添加的属性

时间:2021-10-16 08:45:32
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);