【CSS】グラデーションを使った感触を記録2（放射と扇形）


[【CSS】グラデーションを使った感触を記録（基本と線形）](https://qiita.com/noenture/items/e487c6ebd73faee8cdbc)
**【CSS】グラデーションを使った感触を記録2（放射と扇形）**
[【CSS】グラデーションを使った感触を記録3（反復と合成）](https://qiita.com/noenture/items/7fdce467c1c7b59c69e3)


#放射グラデーション

>放射グラデーションは線形グラデーションと似ていますが、中心点から放射状に広がる点が異なります。中心点をどこに置くかは決めることができます。円形や楕円形を作成することもできます。

```
radial-gradient([option, ]color1, color2)

option = [[(circle) ][(size) ][at (central point)], ]
```

##中心点の指定[at (central point)]
**既定**は`at center center`または`at 50% 50%`

参考画像を載せておきます。白点が中心点です。

![006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679638/34a6c256-5e09-f04f-fd67-501ff6b140ec.png)

```css:box1-default
.box1 {
	background:
		radial-gradient(white 2px, navy 2px, skyblue, navy);
}
```

###キーワード
top/bottom/left/right/centerを組み合わせ、９箇所指定

||||
|--:|:--:|:--|
|at top|at top|at top right|
|at left|**既定**|at right|
|at bottom left|at bottom|at bottom right|

###数値（%値、px値）
左上`at top left`を(0, 0)座標とし、数値を増やすと右下`at bottom right`へ向かう。

##グラデーションサイズの指定[(size) ]
始点は中心点固定ですが、グラデーションの終点をどこに設定するかのオプションです。
4種類用意されています。

||終点|
|--:|:--|
|closest-corner|中心点から最も近い角|
|farthest-corner|中心点から最も遠い角　**既定**|
|closest-side|中心点から最も近い辺|
|farthest-side|中心点から最も遠い辺|

画像で見たほうが理解しやすいと思います。
白線は始点と終点で結ばれた線で、この線上のグラデーションを指定してます。
終点を超える範囲は終点の色で埋めます。
![008.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679638/7d0e6161-c92f-bf6d-af16-9a7a8512b982.png)


`closest-side`の時に、中心点がボックスの端（0%/100%）上に指定されているとグラデーションは生じず終点の色で埋められます。

##形状[(circle) ]
楕円・正円を指定します。

|||
|:--:|:--|
|ellipse|楕円　**既定**|
|circle|正円|

既定は楕円ですが、**ボックスが正方形**且つ**中心点が対角線上**の時は正円が描かれます。
この事から、ボックスの形状と中心点の位置が楕円の形状に影響する事が分ります。

画像を見てもらえばわかりやすいと思います。

一枚目は中心点の指定の参考画像と同じです。（グラデーション部分は全て同じ）
右二つが対角線から外れているのでやや楕円になっています。

![006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679638/34a6c256-5e09-f04f-fd67-501ff6b140ec.png)

ここにボックスを縦に伸ばした画像も載せます。（設定は全て同じ）
正円だったものでも、楕円になっています。

![007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679638/72c0854b-ef54-4ba9-28fd-9f0e5308e204.png)

`circle`を指定することで、常に正円を保ち続けます。

```css:
.box {
	background:
		radial-gradient(circle at 60% 25%, white 2px, navy 2px, skyblue, navy);
}
```


#扇形グラデーション

>(中心から広がるのではなく) 中心点の周りを回りながら色が変化するグラデーションから成る画像を生成します。

中心点を置き、基準線の角度を決めて、その線を始点に扇を開くように時計回りに360度展開します。
![009.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679638/126a3341-6e97-a210-cb9f-b818f2dc6b7e.png)


```
conic-gradient([option, ]color1, color2)

option = [[from (angle) ][at (central point)], ]
```


##中心点の指定[at (central point)]
[放射グラデーションと同じです。](#中心点の指定at-central-point)

##基準線の角度[from (angle) ]
中心点から、基準となる線を引く角度を決めます。
既定は`0deg`で、真上に線を引きます。

![010.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679638/b6c54338-1066-1cfc-1f48-06d60c466b37.png)


##色経由点の配置

**px値**での指定が不可、`[0-360]deg`による**角度**の指定となります。
基準線から傾いた角度を指定します。

![011.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679638/b01bcefe-e72b-1089-5cf3-397ea8daf320.png)

```css:
.box3 {
	background:
		conic-gradient(from 180deg, white, navy 90deg, khaki);
}
```


#参考サイト

[CSS グラデーションの使用 - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)