css3の勉強～その10～ 円形グラデーション

radial-gradient()

円形グラデーションを実現する
中心からのグラデーション(正方形)

See the Pen
yLNGPPw by studio-0 (@studio-0)
on CodePen.

中心から水色→青のグラデーション

.box1{
width:200px;
height:200px;
background-image:radial-gradient(skyblue,blue);

}

中心点を左上を起点に横30px縦40pxのところ

.box2{
width:200px;
height:200px;
background-image:radial-gradient(at 30px 40px,skyblue,blue);
}

グラデーションの大きさを指定できる。横20縦30の小さな楕円形のグラデーションになる。中心点は左上のまま。ellipseは書かなくても良い。

.box3{
width:200px;
height:200px;
background-image:radial-gradient(ellipse 20px 30px at 30px 40px,skyblue,blue);
}

グラデーションの大きさを指定できる。直径20の小さな正円のグラデーションになる。中心点は左上のまま。circleは書かなくても良い。単位に％は使えない

.box4{
width:200px;
height:200px;
background-image:radial-gradient(circle 20px at 30px 40px,skyblue,blue);
}

キーワードによってグラデーションの大きさを指定できる。一番遠い辺を指定。一番遠い辺に向かってグラデーションになる。デフォルトは一番遠い角。

.box5{
width:200px;
height:200px;
background-image:radial-gradient(farthest-side at 30px 40px,skyblue,blue);
}

グラデーションをリピートさせる。

.box6{
width:200px;
height:200px;
background-image:repeating-radial-gradient(skyblue,blue 20px);
}