css之線性漸變

2021-10-10 12:06:21 字數 1453 閱讀 2265

至少兩種顏色,多了不限 

background-image: linear-gradient(顏色1,顏色2.....);

**如下

效果圖如下

background-image: linear-gradient(角度值,顏色1,顏色2.....);

效果圖如下

background-image: linear-gradient(to 方向,顏色1,顏色2.....);

注意:方向以to開頭

**如下·

效果圖如下

background-image: repeating-linear-gradient(顏色 百分比,顏色 百分比)

**如下

效果圖如下

background-image: linear-gradient(角度值,顏色1 百分比,顏色2 百分比.....);

**如下

效果圖如下

background-image: linear-gradient(to 方向,顏色1 百分比,顏色2 百分比...)

**如下

效果如下:

每種核心都寫一遍,那麼不同瀏覽器在執行**, 只會執行自己對應核心的**,其它**遮蔽

-moz-  firefox

-webkit-  chrome/safari -

-o-  opera

-ms-  ie

如果使用相容性的寫法,不加to 和background:

-moz-linear-gradient(top, #27b0f6 0%, #0aa1ed 100%);

background: -webkit-linear-gradient(top, #27b0f6 0%, #0aa1ed 100%);

background: -o-linear-gradient(top, #27b0f6 0%, #0aa1ed 100%);

background: -ms-linear-gradient(top, #27b0f6 0%, #0aa1ed 100%);

css線性漸變

css3中的線性漸變,有了這個,好多以前必須要用才能實現的效果如今可能只需簡單一行 就能實現。首先看看今天的主角 linear gradient 它,實際上不是顏色,而是背景。也就是說,它並不是color的屬性值,而是background的屬性值。我們接下來看看linear gradient 的具體...

CSS3 11 漸變 線性漸變 徑向漸變

漸變是css3當中比較豐富多彩的乙個特性,通過漸變我們可以實現許多炫麗的效果,有效的減少的使用數量,並且具有很強的適應性和可擴充套件性。可分為線性漸變 徑向漸變1.linear gradient線性漸變指沿著某條直線朝乙個方向產生漸變效果 a 語法 linear gradient b 引數說明 第乙...

css3線性漸變

css3漸變有兩種 linear gradient線性漸變和radial gradient徑向漸變。今天看的是linear gradient線性漸變,所以只做線性漸變的總結。w3c標準語法 formal grammar linear gradient to left right top bottom...