최근 프로젝트 대부분이 CSS3를 접하게 되었는데, 빌어먹을 IE는 이를 지원하지 않습니다. 검색해 보니 W3C가 필터를 표준화하는 데 시간이 꽤 걸리는 것 같습니다. IE의 필터 효과를 알아보세요. 관심 있는 친구들은 이 기사가 여러분에게 도움이 되기를 바랍니다.
내 최근 프로젝트에는 CSS3가 포함되어 있습니다. IE는 이를 지원하지 않습니다. 검색한 결과 IE의 필터가 꽤 작동하는 것으로 나타났습니다. W3C가 필터를 표준화하고 있는 것 같습니다. 오늘은 IE의 필터 효과(탐색하려면 IE를 사용하십시오)를 정리하고, 내일은 CSS3의 해당 효과(탐색하려면 Webkit 커널을 사용하십시오)를 작성하겠습니다. , 독자들에게 더 좋은 기사가 있고 이를 공유하고 싶다면 웹 프런트엔드 커뮤니케이션 그룹(75701468)에 가입하여 귀하와 나의 경험을 공유하세요.
필터: 투명도 효과
구문: 필터:Alpha(Opacity=opacity,FinishOpacity=finishopacity, Style=style,StartX=startX, StartY=startY, FinishX=finishX, FinishY =finishY)
지침:
불투명도: 시작 값(0~100), 0은 투명, 100은 원본 이미지입니다.
FinishOpacity: 목표값.
스타일: 1 또는 2 또는 3
StartX: 임의의 값
StartY: 임의의 값
FinishX: 임의의 값
FinishY: 임의의 값
일반 투명도 효과: 필터: alpha(opacity=30);
W3C 코드: -webkit-filter:opacity(0.3); 또는 opacity:0.3;
rose
선 유형 투명도: 필터: alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=200, FinishY=180);
W3C 코드: 알 수 없음 ;
장미
방사성: 필터: Alpha(Opacity=0, FinishOpacity=100, Style=2);
W3C 코드 : 알 수 없음;
장미
부드러운 조명 효과 필터:alpha(opacity=100, FinishOpacity=0,style=3);
W3C 코드: 알 수 없음;
Rose
필터: 그림자 효과
구문: 필터:DropShadow (색상=색상, 꺼짐X=꺼짐X, 꺼짐Y=꺼짐Y, 양수=양수)
설명:
색상:#rrggbb 형식, 모두.
Offx: X축 편차 값입니다.
Offy: Y축 오프셋 값입니다.
긍정: "True"인 경우 투명하지 않은 픽셀에 대해 보이는 그림자를 만듭니다. "False"인 경우 투명한 픽셀 부분에 대해 보이는 그림자를 만듭니다.
그림자 효과: filter:progid:dXImageTransform.Microsoft.DropShadow(color=#000000,offX=5,offY=5, positives=true);
W3C 코드: -webkit-filter :drop-shadow(5px 5px 0 #000000); 또는 box-shadow:5px 5px 0 #000;
장미
그림자 효과: progid : DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=10);
W3C 코드: 알 수 없음;
Rose
색상 고려 효과: progid:DXImageTransform.Microsoft.Chroma(color=#59A074);
W3C 코드: 알 수 없음;
장미꽃
모자이크: 필터:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=3);
W3C 코드: 알 수 없음;
로즈
글로우 효과: filter:progid:dXImageTransform.Microsoft.Glow(color=#000000,Strength=5);
W3C 코드: 알 수 없음;
로즈
가로 뒤집기: 필터: Fliph;
W3C 코드: -webkit-transform:rotateY(180deg);
로즈
세로 뒤집기: 필터: Flipv;
W3C 코드: -webkit-transform:rotateX(180deg);
Rose
반전 효과: 필터: invert;
W3C 코드: -webkit-filter:invert(1);
Rose
흑백 효과: filter:gray;
W3C 코드: -webkit-filter:grayscale(1);
Rose
X선 사진: filter:xray;
W3C 코드: -webkit-filter:grayscale(1) invert(1);
장미
필터: 흐림 효과
구문: 필터:Blur(추가 = 추가, 방향 = 방향, 강도 = 강도 )
설명 :
추가: 이미지가 인상주의적 흐림 효과로 변경되는지 여부를 지정합니다. 1은 true이고 0은 false입니다.
방향: 각도, 0~315도, 단계 크기는 45도입니다.
강도: 흐림의 영향을 받는 너비의 픽셀 수, 기본값은 5픽셀입니다.
바람 흐림(각도 포함): 필터: 흐림(add=true,direction=45,strength=30);
W3C 코드: 없음
Rose
일반 흐림: filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=7);
W3C 코드: -webkit-filter:blur(3px);
Rose
필터: 파급 효과
구문: 필터: Wave(Add=add, Freq =freq, LightStrength= 강도, 위상=단계, 강도=강도)
설명:
추가: 중단할지 여부, 기본값은 "True"입니다.
Freq: 완전한 잔물결이 생성되는 횟수입니다.
LightStrength: 빛과 그림자를 강화합니다. 정수 값은 0~100입니다.
Phase: 사인파의 오프셋으로, 일반적으로 값은 0이며, 범위는 0~100의 정수 값입니다.
강도: 진폭을 나타냅니다.
사인파: 필터: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3);
W3C 코드: 알 수 없음;
장미
그라디언트 효과: 필터: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr="#000000", EndColorStr="#ffffff")
W3C 코드: background:-webkit-linear-gradient(#000000 0, #ffffff 100%);
[관련 권장사항]
2.웹 디자이너가 CSS3 기술을 잘 활용할 수 있는 방법에 대한 간략한 설명
4. 5.위 내용은 CSS3의 필터 효과 구현 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!