移動開發之css3實現背景幾種漸變效果 · 前端小冊

移動端背景漸變，非常的年輕，符合90后年輕一代的審美，css3的這個漸變目前主要是應用在手機前端領域。產品設計中使用漸變色的好處： 1：觀眾不至于眼睛過于疲勞（如果是淺色背景，3個小時下來極容易造成觀眾閉上眼睛還有殘影，眼睛會極度疲勞）。 2：優雅而低調的深淺色調: 3：純色單調漸變色一是色彩不單調二是在有限空間內盡可能制造空間感 4：稍微加點漸變可以讓純色層顯得更細膩，不那么單調。畫面顯得更豐富。代碼如下，非常簡單新的梯度漸變語法，新的語法包含四個漸變函數： linear-gradient()：線性梯度漸變 radial-gradient()：徑向梯度漸變 repeating-linear-gradient()：重復梯度漸變 repeating-radial-gradient()：色站 ### 一：線性漸變 linear-gradient()：線性梯度漸變 ~~~ <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> <title>移動開發之css3實現背景漸變效果</title> <style type="text/css"> .linear{ /*仿支付寶背景藍色漸變*/ background-image: linear-gradient(to top, #66b7f9,#1c82d4); height: 15rem; } </style> </head> <body> <div class="linear"></div> </body> </html> ~~~ ### 二：radial-gradient徑向漸變代碼 ~~~ <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> <title>移動開發之css3實現背景漸變效果</title> <style type="text/css"> .linear{ /*background-image: linear-gradient(to top, #66b7f9,#1c82d4);*/ background: radial-gradient(#ffffff,#1c82d4); height: 15rem; } </style> </head> <body> <div class="linear"></div> </body> </html> ~~~ ### 三： repeating-linear-gradient()：重復梯度漸變 ~~~ <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> <title>移動開發之css3實現背景漸變效果</title> <style type="text/css"> .linear{ background: repeating-linear-gradient(#1c82d4, #fff 30%, #1c82d4 35%); height: 15rem; } </style> </head> <body> <div class="linear"></div> </body> </html> ~~~ ### 四：repeating-radial-gradient()：色站 ~~~ <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> <title>移動開發之css3實現背景漸變效果</title> <style type="text/css"> .linear{ background: repeating-radial-gradient(#1c82d4, #fff 30%, #1c82d4 35%); height: 15rem; } </style> </head> <body> <div class="linear"></div> </body> </html> ~~~ ### /全兼容的移動端漸變寫法/ ~~~ /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #66b7f9,#1c82d4); /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear,top,from(#66b7f9),to(#1c82d4)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(top, #66b7f9, #1c82d4); /* Opera 11.10+ */ background: -o-linear-gradient(top, #66b7f9, #1c82d4); /* default */ background: linear-gradient(top, #66b7f9, #1c82d4); background-color: #1c82d4; ~~~