CSS3 선형 그래디언트 이해

단지 그라데이션을 표시하기 위해 이미지를 만드는 것은 융통성이 없으며 금방 나쁜 습관이 될 수 있습니다. 하지만 안타깝게도 이 글을 쓰는 시점에서는 여전히 그래야 할 수도 있지만, 더 이상은 아니기를 바라겠습니다. Firefox와 Safari/Chrome 덕분에 이제 최소한의 노력으로 강력한 그라데이션을 얻을 수 있습니다. 이 기사에서는 CSS 그래디언트의 간단한 구현과 Mozilla 및 웹킷 브라우저에서 이 속성이 어떻게 다른지 보여줍니다.

추신: 이 기사의 원본 텍스트는 비디오를 제공하지만 잘 알려진 이유로 이 비디오를 YouTube에서 볼 수 없습니다. 보고 싶은 학생은 직접 시청할 수 있는 방법을 찾으십시오(최대 720P): http ://www.youtube.com/watch?v=9D2hyM5SSCE

웹킷

Mozilla와 Webkit은 일반적으로 CSS3 속성에 대해 동일한 구문을 채택하지만 불행히도 그라디언트에 동의할 수 없습니다. Webkit은 다음 구조를 사용하여 그라디언트를 지원하는 최초의 브라우저 커널입니다.

/* 구문, 출처: http://webkit.org/blog/175/introducing-css-gradients/ */
-webkit-gradient(<유형>, <점> [, <반경>]?, <점> [, <반경>]? [, <정지>]*)

/* 실제로는... */
배경: -webkit-gradient(선형, 0 0, 0 100%, from(red), to(blue));