선형 그라디언트 linear-gradient(방향, 색상 색상의 위치, 색상 색상의 위치, ...)
원형 그라디언트 radial-gradient(원이 시작되는 지점, 색상 색상의 위치, 색상 색상의 위치, ...)
html)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0"> <title>Insert title here</title> <style> div.linear { /* 선형 그라디언트 linear-gradient(방향, 색상 색상의 위치, 색상 색상의 위치, ...) */ background: -moz-linear-gradient(left, #ff0000 0%, #00ff00 50%, #0000ff 100%); background: -webkit-linear-gradient(left, #ff0000 0%, #00ff00 50%, #0000ff 100%); background: -o-linear-gradient(left, #ff0000 0%, #00ff00 50%, #0000ff 100%); background: -ms-linear-gradient(left, #ff0000 0%, #00ff00 50%, #0000ff 100%); background: linear-gradient(to right, #ff0000 0%, #00ff00 50%, #0000ff 100%); width: 100%; height: 200px; } div.radial { /* 원형 그라디언트 radial-gradient(원이 시작되는 지점, 색상 색상의 위치, 색상 색상의 위치, ...) */ background: -moz-radial-gradient(center, ellipse cover, #ff0000 0%, #00ff00 50%, #0000ff 100%); background: -webkit-radial-gradient(center, ellipse cover, #ff0000 0%, #00ff00 50%, #0000ff 100%); background: -o-radial-gradient(center, ellipse cover, #ff0000 0%, #00ff00 50%, #0000ff 100%); background: -ms-radial-gradient(center, ellipse cover, #ff0000 0%, #00ff00 50%, #0000ff 100%); background: radial-gradient(ellipse at center, #ff0000 0%, #00ff00 50%, #0000ff 100%); width: 100%; height: 200px; } </style> </head> <body> <div class="linear"></div> <div class="radial"></div> </body> </html> | cs |
결과
'IT > - 프로그래밍' 카테고리의 다른 글
| HTML5/CSS3 animation : 애니메이션 (0) | 2017.06.20 |
|---|---|
| HTML5/CSS3 transition : 요소의 속성이 바뀔때 전환되는 효과를 보여준다 (0) | 2017.06.19 |
| HTML5/CSS3 column-span: all : 합쳐야 하는 다단 부분에 지정 (0) | 2017.06.17 |
| HTML5/CSS3 column-count : float 없이 다단 레이아웃 만들기 (0) | 2017.06.16 |
| HTML5/CSS3 clear: both : float 속성을 해제 (0) | 2017.06.15 |