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

2020-05-10 23:49:24   1064

高校博达网站群网站建设制作过程中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度位置开始渐变 */