css3 그라데이션

css3의 점차적인 변화를 처음 접한 것은 아주 오래전이다. 이 물건이 매우 재미있다고 느낀다. 포토샵을 하는 것처럼 화려한 것을 많이 만들 수 있다.
브라우저 지원 현황
IE
FF
Chrome
Safari
Opera
iOS
Android
Android Chrome
6-9(no)
2-3.5(no)
4-9(부분-webkit-)
3.1-3.2(no)
-
3.2-4.3(부분)
2.1-3.0(-webkit-)
10-25(-webkit-)
10+
3.6-15(-webkit-)
10-25(-webkit-)
4-5(부분) 5-6.1(-webkit-)
-
5+
4-4.3(-webkit-)
26+
-
15+
25+
5-6
15+
-
4.4+
-
선형 점차적 변화linear-gradient
문법 사용
linear-gradient([ [ [ | to [top | bottom] || [left | right] ],]? [, ]+);
다음 코드는 모두 실행할 수 있으며, 실행된 결과는 같다

linear-gradient(#fff, #333);
linear-gradient(to bottom, #fff, #333);
linear-gradient(to top, #333, #fff);
linear-gradient(180deg, #fff, #333);
linear-gradient(to bottom, #fff 0%, #333 100%);

각도, 시작 방향, 색상 및 색상 비율을 정의할 수 있습니다.
demo

填充试线性渐变 repeating-linear-gradient

用法和linear-gradient 差不多，其实就是渐变的一个填充。可以精确到像素，比如实现一个斑马纹

径向渐变radial-gradient

使用语法

radial-gradient( [ circle || ] [ at ]? ,
| [ ellipse || [ | ]{2}] [ at ]? ,
| [ [ circle | ellipse ] || ] [ at ]? ,
| at ,
[ , ]+ )

以下代码执行结果一样

radial-gradient(circle, #f00, #ff0, #080);
radial-gradient(circle at center, #f00, #ff0, #080);
radial-gradient(circle at 50%, #f00, #ff0, #080);
radial-gradient(circle farthest-corner, #f00, #ff0, #080);

length를 통해 모양의 위치를 신속하게 정할 수 있습니다. closest-side 점차적인 가장자리 모양은 용기 거리의 점차적인 중심점과 가장 가까운 쪽(원형) 또는 최소한 점차적인 중심점과 가장 가까운 수직과 수평 쪽(타원)과 접할 수 있습니다.
closest-corner 점차적인 가장자리 모양은 용기 거리 점차적인 중심점의 가장 가까운 각과 교차한다.
farthest-side는closest-side와 반대로 가장자리 모양은 용기의 점차적인 중심점에서 가장 먼 쪽과 서로 접하거나 가장 먼 수직과 수평 쪽이다.
farthest-corner 점차적인 가장자리 모양은 용기 거리 점차적인 중심점에서 가장 먼 각과 교차한다.
원심의 위치를 at로 빠르게 정할 수 있습니다. circle at left top 원심은 왼쪽 상단에 있습니다.
circle at right top 중심은 오른쪽 위 모서리
circle at left bottom 중심은 왼쪽 아래
circle at right bottom 중심은 오른쪽 아래
circle at center | at 50% 중심이 가운데에 있음
코드 예

得到如下

填充式径向渐变repeating-radial-gradient

这个和repeating-linear-gradient 使用差不多，就是对渐变的填充。

代码示例

得到如下，棒棒糖

利用渐变可以做出什么多效果

代码示例

아래의 그림은 아름다운 기포를 만들 수 있다
그리고 지난 글의 애니메이션으로 그를 움직이게 했다.
효과를 보고 여기를 눌러주세요.https://k-ui.xyz애니메이션이 지연되어 잠시 기다려야 나타날 수 있다.
[끝]