컨트롤의 그래디언트

1882 단어
  • 주의해야 할 점:
  • 점차적인 색을 설정하려면 , hover의 앞뒤가 호응해야 한다. 그렇지 않으면 매우 이상해 보인다
  • 서로 다른 환경에 적합해야 합니다. 그렇지 않으면 같은 코드가 다른 브라우저에서 효력을 상실할 수 있습니다.
  • 웹키트: Safari 및 Chrome
  • moz: Firefox
  • Mircrosoft: IE, 가장 징그러운 브라우저

  • 코드는 다음과 같다
     .black {
         color: #008000;
         border: solid 1px #333;
         background: white;
         background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));          background: -moz-linear-gradient(top, #666, #000);
         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666',endColorstr='#000000');
     }
     
     .black:hover {
         color: #666; 
         background: -webkit-gradient(linear, left top, right bottom, from(#444), to(#000));
         background: -moz-linear-gradient(top, #000, #444);  
         filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444',endColorstr='#000000');
     }
    
  • 매개변수 분석:
  • Safari 브라우저: background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
  • linear: 색이 점차적으로 변하는 방식, 선형
  • lefttop: 색상이 점차적으로 변하는 시작 위치
  • left bottom: 색상이 점차적으로 변하는 끝 위치
  • from: 색상이 점차적으로 변하는 시작 색상
  • end: 색상 그라데이션의 끝 색상
  • FireFox 브라우저: -moz-linear-gradient(top, #666, #000);
  • 웹키트와 달리 이 방법은 함수 이름에 점차적인 방식을 직접 썼다.linear
  • top: 시작 위치를 나타내고 끝 위치는 상대적인 위치를 나타낸다
  • 예: top 시작,bottom 종료
  • left 시작,right 종료
  • lefttop 시작,right bottom 종료
  • 다음 두 개는 색상의 시작과 끝
  • IE: filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444',endColorstr='#000000');
  • IE 브라우저는 백그라운드 속성을 통해 점차적인 색을 직접 사용할 수 없고 DX 렌더링을 사용해야 하기 때문에 함수는 위와 같다
  • 본인은 Mac를 사용하기 때문에 IE 브라우저를 테스트하지 않았습니다

  • 좋은 웹페이지 즐겨찾기