筆者其實對於css一直是一知半解的狀態。今天公司的需求需要讓背景如圖上所示。

通過度娘找到了一個強大的背景漸變手動設計的網站，在此分享

 gradient-editor(國外開發者) 

順便獻上自己css程式碼。或許有些用處

background: rgb(248,181,0); /* Old browsers */
            background: -moz-linear-gradient(45deg, rgba(248,181,0,1) 4%, rgba(252,205,77,1) 13%, rgba(252,205,77,1) 13%, rgba(249,249,247,1) 36%, rgba(249,249,247,1) 36%, rgba(249,249,247,1) 36%, rgba(249,249,247,1) 36%, rgba(249,249,247,1) 37%, rgba(249,249,247,1) 62%, rgba(252,205,77,1) 85%, rgba(252,205,77,1) 85%, rgba(248,181,0,1) 100%, rgba(248,181,0,1) 100%, rgba(251,223,147,1) 100%, rgba(248,181,0,1) 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(45deg, rgba(248,181,0,1) 4%,rgba(252,205,77,1) 13%,rgba(252,205,77,1) 13%,rgba(249,249,247,1) 36%,rgba(249,249,247,1) 36%,rgba(249,249,247,1) 36%,rgba(249,249,247,1) 36%,rgba(249,249,247,1) 37%,rgba(249,249,247,1) 62%,rgba(252,205,77,1) 85%,rgba(252,205,77,1) 85%,rgba(248,181,0,1) 100%,rgba(248,181,0,1) 100%,rgba(251,223,147,1) 100%,rgba(248,181,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(45deg, rgba(248,181,0,1) 4%,rgba(252,205,77,1) 13%,rgba(252,205,77,1) 13%,rgba(249,249,247,1) 36%,rgba(249,249,247,1) 36%,rgba(249,249,247,1) 36%,rgba(249,249,247,1) 36%,rgba(249,249,247,1) 37%,rgba(249,249,247,1) 62%,rgba(252,205,77,1) 85%,rgba(252,205,77,1) 85%,rgba(248,181,0,1) 100%,rgba(248,181,0,1) 100%,rgba(251,223,147,1) 100%,rgba(248,181,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8b500', endColorstr='#f8b500',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
            
 

最後是筆者使用該網站的一些經驗，具體還是需要大家摸索。