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);
时间: 2024-10-17 17:00:44