高校博达网站群网站建设制作过程中css背景渐变色代码写法分线性渐变和径向渐变两种方法实现?

高校博达网站群网站建设制作过程中css背景渐变色代码写法分线性渐变和径向渐变两种方法实现?

1.线性渐变

　　height: 200px;

　　background: -webkit-linear-gradient(yellow, green);

　　background: -o-linear-gradient(yellow, green));

　　background: -moz-linear-gradient(yellow, green));

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

2.径向渐变

　　height: 150px;

　　width: 200px;

　　background: -webkit-radial-gradient(orange, yellow, pink);

　　background: -o-radial-gradient(orange, yellow, pink);

　　background: -moz-radial-gradient(orange, yellow, pink);

　　background: radial-gradient(orange, yellow, pink);

3.范例如下:

　　background-image: linear-gradient( #CD853F, #CD69C9);/* 默认方向自下向上 */

　　background-image: linear-gradient(to left,#CD853F, #CD69C9);/* 自右向左 */

　　background-image: linear-gradient(to left,#CD853F 50px, #CD69C9); /* 自右向左 起始颜色在50px位置开始渐变 */

　　background-image: linear-gradient(to top left,#CD853F , #CD69C9);/* 自右下向左上渐变 */

　　background-image: linear-gradient(30deg , #CD853F , #CD69C9);/* 30度位置开始渐变 */