線性漸變: 是背景圖的技術,沿着一條軸線,進行顏色過渡變換,最少是兩個顏色
方向,顏色1,顏色2,....(默認將顏色等分)
方向:
to bottom 由上到下
to top 由下到上
to left 由右到左
to right 由左到右
to left top
to left bottom
to right top
to right bottom
還可以寫角度 -45deg
<style type="text/css">
.box{
width:300px;
height: 300px;
margin: 100px auto;
/* background-image:linear-gradient( 180deg ,red 50px,green 100px,blue) ; */
/* 0px-50px 從0-50是紅色,50px-100px 紅到綠的漸變, 100-完 綠到藍的漸變 */
/* background-image:linear-gradient( to right,red 0px,red 50px,green 100px,blue 300px) ; */
/* 0-30% 是紅色 30%-50% 紅到藍的漸變 50%-80%是藍到黃的漸變,80%-100%是黃色 */
background-image: linear-gradient(to right ,red 30%, blue 50%,yellow 80%,yellow 100%);
}
.box:nth-of-type(2){
background-image: linear-gradient(to right,red 0% ,red 50%,blue 50%,blue 100%);
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
</body>
