service@xinpop.cn
高校博達(dá)網(wǎng)站群網(wǎng)站建設(shè)制作過程中css背景漸變色代碼寫法分線性漸變和徑向漸變兩種方法實現(xiàn)?
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);/* 默認(rèn)方向自下向上 */
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度位置開始漸變 */