집 >웹 프론트엔드 >CSS 튜토리얼 >CSS 필터 속성 구문 소개_기본 튜토리얼

CSS 필터 속성 구문 소개_기본 튜토리얼

WBOY원래의: 2016-05-16 12:08:171623검색

CSS 필터
스타일 속성:
태그에 적용 가능하며,

에서 널리 사용할 수 있습니다.

태그 등,
더 중요한 것은 태그에 사용할 수 있다는 것입니다.
페이지 전환 효과:
앞면과 페이지 사이에 "" 추가
설명: 기간은 페이지 전환 시간, 3.000은 3초를 의미하며 일반적으로 3을 직접 입력할 수 있습니다.
;전환 전환 효과는 1~23까지 22가지의 전환 효과가 있으며 그 중 23개의
은 무작위 효과입니다.
필터 효과:
포토샵 필터를 많이 사용해 보셨으니, 페이지에 필터를 활용해 새로운 의미를 만들어 볼까요!
구문: STYLE="filter:filtername(fparameter1,fparameter2...)}
(Filtername은 필터 이름, fparameter1, fparameter2 등은 필터 매개변수)
필터 설명 :
알파: 투명도를 설정합니다.
블러: 고속 이동 효과, 즉 블러 효과를 만듭니다.
크로마: 특수 색상을 투명하게 만듭니다.
드롭섀도우: 고정을 만듭니다.
FlipH: 수평 거울 이미지를 만듭니다.
FlipV: 수직 거울 이미지를 만듭니다.
glow: 근처 개체의 가장자리에 빛을 추가합니다.
gray: 이미지를 변환합니다. greyscale.
invert: 색상을 반전시킵니다.
light: 개체에 광원을 만듭니다.
mask: 개체에 투명 마스크를 만듭니다.
오프셋 고정 그림자를 만듭니다. >wave: 파급 효과
Xray: 객체를 X-ray 노출과 동일하게 만듭니다.
1. 필터: 알파
구문:
STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity,Style=style,
StartX=startX,StartY= startY, FinishX = 종료 🎜>스타일: 1 또는 2 또는 3
StartX: 모든 값
StartY: 모든 값
예: 필터:Alpha(Opacity="0",FinishOpacity="40",Style="2")
2. 필터:blur
구문:
STYLE="filter:Blur(Add=add,Direction) =방향,
강도=강도)"
설명:
추가: 일반적으로 1 또는 0입니다.
방향: 각도, 0~315도, 단계 크기는 45도입니다.
강도: 효과 성장 값은 일반적으로 5이면 충분합니다.
예: filter:Blur(Add ="1", Direction="45", Strength="5")
3. 필터: 채도
구문:
STYLE="filter:Chroma(Color=color)"
설명:
color:#rrggbb 형식, 모두
예: filter:Chroma(Color="#FFFFFF")
4. 필터: DropShadow
구문:
STYLE="filter: DropShadow(Color=color,OffX=offX,OffY=offY,Positive=긍정)"
설명:
색상:#rrggbb 형식 , 임의.
Offx: X축 편차 값
Offy: Y축 편차 값
양수: 1 또는 0.
예: filter:DropShadow(Color="#6699CC", OffX="5",OffY="5",
Positive="1" )
5. 필터: FlipH
구문:
STYLE="filter:FlipH"
예: 필터 :FlipH
6. 필터: FlipV
구문:
STYLE="filter:FlipV"
예: 필터:FlipV
7. 구문:
STYLE ="filter:Glow(Color=color,Strength=strength)"
설명:
색상: 광선 색상
강도: 강도(0-100)
예: filter:Glow(Color= "#6699CC",Strength="5")
8개 필터 :Gray
구문:
STYLE="filter:Gray"
예: 필터:Gray
9. 🎜>구문:
STYLE="filter:Invert"
예: 필터:Invert
10. 필터:마스크
구문:
STYLE="filter:Mask(Color=color)"
예: filter:Mask(Color="#FFFFE0 ")
11. 필터: 그림자
구문:
filter:Shadow(Color=color,Direction=direction)
설명:
색상:#rrggbb 형식
방향: 각도, 0-315도, 단계 크기는 45도입니다.
예: 필터:Shadow(Color="#6699CC",Direction="135")
12. 필터: Wave
구문:
filter:Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,
Strength=strength)
설명:
추가 : 일반적으로 1 또는 0.
Freq:변형 값
LightStrength: 변형 비율.
Phase: 각도 변형 비율.
예: 필터:wave(추가) ="0",Phase="4", Freq="5",LightStrength="5",Strength="2")
13. 필터:Xray
구문:
STYLE="필터: Xray"
예: 필터:Xray

성명：

이전 기사：웹 표준을 제정하는 이유와 웹 표준의 이점다음 기사：웹 표준을 제정하는 이유와 웹 표준의 이점

CSS 필터 속성 구문 소개_기본 튜토리얼

관련 기사