CSS3漸變有兩種種方式:線性漸變和徑向漸變。線性漸變是沿著一條直線進行的漸變,而徑向漸變是從一個中心點向外擴散的漸變。
線性漸變使用的屬性是background-image: linear-gradient()
。這個屬性可以接受兩個參數 - 漸變的方向和起始/結束顏色。例如:
.box { background-image: linear-gradient(to bottom right, #ff0000, #0000ff); }
上述代碼將創建一個從左上角到右下角的線性漸變,起始顏色為紅色,結束顏色為藍色。
徑向漸變使用的屬性是background-image: radial-gradient()
。這個屬性可以接受三個參數 - 漸變的形狀、起始/結束顏色和漸變的位置。例如:
.box { background-image: radial-gradient(circle at center, #ff0000, #0000ff); }
上述代碼將創建一個圓形的徑向漸變,起始顏色為紅色,結束顏色為藍色。
上一篇css 長的省略