HTML和CSS的連續進化帶來了越來越多的功能和特性,其中之一是漸變。漸變是一種更好的方式來展示給用戶。HTML和CSS提供了幾種漸變方式讓你可以使用。下面是一些例子。
/* 線性漸變 */ background: linear-gradient(to bottom, #C3E1F5, #6495ED); /* 徑向漸變 */ background: radial-gradient(circle, #C3E1F5, #6495ED); /* 斜向漸變 */ background: linear-gradient(to bottom right, #C3E1F5, #6495ED); /* 環繞漸變 */ background: repeating-radial-gradient(circle, #C3E1F5, #6495ED 20%);
上述代碼是幾種不同類型的漸變樣式。第一種是線性漸變,可以從頂部到底部或者從左到右漸變。第二種是徑向漸變,可以使用一個圓圈或者橢圓形來元素來指定漸變。第三種是斜向漸變,可以從左上角斜向右下角漸變。最后一種是環繞漸變,可以以點為中心環繞元素,然后重復漸變。這些樣式可以免去使用圖片的麻煩,讓你的網站加載更佳的快。
另外,你還可以使用less和scss這些預處理器使漸變創建更加簡單和可重用。這些預處理器中都有內置的漸變函數可以直接使用。每個預處理器都有自己的語法和細節,但是漸變函數通常是通用的。例如在less中這樣使用:
/* 在LESS中創建漸變 */ #content { .background(@startColor, @endColor) { background: -moz-linear-gradient(@startColor, @endColor); background: -webkit-linear-gradient(@startColor, @endColor); background: linear-gradient(@startColor, @endColor); } .background(#CC0000, #FF9900); }
總結一下,漸變背景是讓網站、應用或者頁面更為美觀的一種方式。HTML和CSS提供了幾種類型的漸變供你選擇,并且也可以使用less和scss這些預處理器使漸變創建更加方便、簡單和可重用。
上一篇mysql累加值