> 웹 프론트엔드 > CSS 튜토리얼 > 브라우저 간 호환 가능한 선형 그라데이션을 어떻게 구현할 수 있나요?

브라우저 간 호환 가능한 선형 그라데이션을 어떻게 구현할 수 있나요?

DDD
풀어 주다: 2024-11-21 01:54:12
원래의
838명이 탐색했습니다.

How Can I Implement Cross-Browser Compatible Linear Gradients?

다양한 브라우저에서 선형 그라데이션 구현

브라우저 간 호환성

문제: 선형에 대한 브라우저 간 호환성 확보 다음과 같이 지정된 그라데이션:

background-image: -webkit-gradient(linear, right top, left bottom, from(#0C93C0), to(#FFF));
background-image: -moz-linear-gradient(right, #0C93C0, #FFF);
로그인 후 복사

Opera 및 IE 대안:

background-image:     -ms-linear-gradient(right, #0c93C0, #FFF);  
background-image:      -o-linear-gradient(right, #0c93C0, #FFF);
로그인 후 복사

수직 및 수평 그라데이션

그라디언트를 수정하려면 수직 대신 수평인 경우 시작점과 끝점에 다음 값을 사용합니다.

top left
top right
로그인 후 복사

예:

background-image: -webkit-linear-gradient(top, #0C93C0, #FFF);
background-image:    -moz-linear-gradient(top, #0C93C0, #FFF);
background-image:     -ms-linear-gradient(top, #0C93C0, #FFF);
background-image:      -o-linear-gradient(top, #0C93C0, #FFF);
background-image:         linear-gradient(top, #0C93C0, #FFF);
로그인 후 복사

Internet Explorer < 10

Internet Explorer 10 이전 버전의 경우 다음 코드를 사용하세요.

/*IE7-*/ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0);
/*IE8+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";
로그인 후 복사

설명

  • 접두사는 실험적인 CSS 속성에 사용됩니다.

    • -webkit- Webkit 브라우저(Chrome, Safari)용
    • -moz- Firefox용
    • -o- Opera용
    • -ms - Internet Explorer
  • 접두사가 없는 선형 그라데이션은 CSS 사양을 완전히 준수함을 나타냅니다.

참조

  • [ MDN: 선형-그라디언트](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient)

위 내용은 브라우저 간 호환 가능한 선형 그라데이션을 어떻게 구현할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿