css3の勉強～その9～ 線形グラデーション

linear-gradient()

上からグラデーションが作られる

div{
width:200px;
height:200px;
background-image:linear-gradient(to left top,skyblue,blue);水色から青への右下から左上へのグラデーション
}

div{
width:200px;
height:200px;
background-image:linear-gradient(45deg,skyblue,blue);0degは上から下。45degは45度時計回りに回転させる
}

div{
width:200px;
height:200px;
background-image:linear-gradient(lightgreen,skyblue,blue);3色のグラデーションも可能
}

div{
width:200px;
height:200px;
background-image:linear-gradient(lightgreen 10%,skyblue 70%,blue);3色のグラデーションの分量指定もできる
}

div{
width:200px;
height:200px;
background-image:repeating-linear-gradient(lightgreen, skyblue 20px);2色のグラデーションを繰り返す
}