과거에는 대부분의 웹 사이트가 이미지를 사용하여 아름다운 UI를 만들었습니다. 다양한 CSS 속성 덕분 에이 추세가 변경되었습니다. 이 튜토리얼은 CSS 기울기를 배우는 데 도움이됩니다. 그라디언트를 사용하여 배경의 이미지뿐만 아니라 다양한 UI 요소를 대체 할 수 있습니다. 약간의 연습으로 이미지를 사용하지 않고 복잡한 패턴을 만들 수 있습니다.
이 기사에서는 선형, 방사형 및 최신 반복 그라디언트를 소개합니다.
키 포인트
<code>.example { background: linear-gradient( [方向], [第一种颜色], [第二种颜色], [更多颜色 ...] ); }</code>
각도가 다른 선형 그라디언트
<code>.example { background: linear-gradient(to right, hotpink, lightpink); }</code>
<code>.example { background: linear-gradient( [方向], [第一种颜色], [第二种颜色], [更多颜色 ...] ); }</code>다중 그라데이션으로 선형 구배 반복
<code>.example { background: linear-gradient(to right, hotpink, lightpink); }</code>
다중 그라데이션으로 방사형 구배 반복
결론
이 튜토리얼에서는 CSS 그라디언트의 모든 측면을 다루려고 노력합니다. 간단한 패턴이 필요한 많은 경우 그라디언트는 이미지를 사용해야 할 필요가 없습니다. 물론, 그라디언트는 이미지에 대한 추가 HTTP 요청을 피하지만 여전히 성능 문제를 일으킬 수 있으며주의해서 사용해야합니다.
<code>.example { background: -prefix-linear-gradient(left, red, blue); }</code>
예, RGBA 색상 값을 사용하여 CSS 그라디언트에서 투명성을 사용할 수 있습니다. RGBA 색상 값은 RGBA (빨간색, 녹색, 파란색, 알파)로 지정됩니다. 알파 매개 변수는 0.0 (완전히 투명)과 1.0 (완전히 불투명) 사이의 숫자입니다.
단단한 색상 변동으로 그라디언트를 만드는 방법은 무엇입니까?예, CSS에서 그라디언트를 배경 이미지로 사용할 수 있습니다. 그라디언트 함수는 CSS 이미지 데이터 유형을 반환하고 이미지를 사용할 수있는 곳 어디에서나 사용할 수 있습니다. 예를 들어, 그라디언트를 요소의 배경 이미지 또는 여러 배경의 일부로 사용할 수 있습니다.
CSS 그라디언트는 Chrome, Firefox, Safari, Edge 및 Internet Explorer 10 이상을 포함한 모든 최신 브라우저에서 널리 지원됩니다. 그러나 그라디언트를 지원하지 않는 이전 브라우저의 경우 대체 색상을 제공해야합니다.
위 내용은 CSS 구배 : 구문 충돌 과정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!