사용법 :
background: linear-gradient( 방향/각도, 색상 중지점1, 색상 중지점2, ...);
콤마를 사용한다.
- 방향 / 각도 :
45deg
,to left bottom
,to right top
left top :left top
을 향하여 적용된다. 마지막에 입력한 색상이left top
에 위치한다.
- 기본값 : to bottom,
180 deg
이다. 가로로 보여진다.
background:linear-gradient(to left top, pink 30%, black, blue, white);
background:linear-gradient(to right top, orange, skyblue, green, red);
사용법 :
background: repeating-linear-gradient( 각도/방향, 컬러 스톱, 컬러 스톱, ... );
background: repeating-linear-gradient(90deg, red,plum 30px, yellow 30px, yellow 60px,orange 60px, plum 90px);
red, plum 30px
: red와 30px인 plum까지 그라디언트 한다.30px: plum 30px: yellow
: 색상을 끊는다.plum을 끊기게 하려면 사이사이에 중단점을 지정해준다.
background: repeating-linear-gradient(90deg, red,red 15px,plum 15px, plum 30px, yellow 30px, yellow 60px,orange 60px,orange 75px,plum 75px, plum 90px);
사용법 :
background: radial-gradient( 모양 | 사이즈 | at | 위치 위치, 색 중단점, 색 중단점, ... );
closest-corner
: 가장 가까운 모서리까지가 그라데이션의 크기이다.farthest-corner
: 가장 먼 모서리까지closest-side
: 가장 가까운 면까지farthest-side
: 가장 먼 면까지30% 40%
왼쪽에서부터 30%, 위쪽에서부터 40% 이다.
background: radial-gradient(circle farthest-corner at 70% 30%, pink 2%, black);
box-shadow: 6px 25px 20px 1px grey;
그림자 추가
사용법 :box-shadow: 가로 | 세로 | 흐림정도 | 번짐정도 | 색상
![]
사용법 :
background: repeating-radial-gradient( 모양|사이즈|at|위치, 색상 중단점, ... );
repeating-linear-gradient와 비슷하다.
background:repeating-radial-gradient(circle closest-side at 50% 50%, pink,pink 20px, black 20px, black 40px, pink 40px, pink 60px, skyblue 80px);