CSS 필터 효과(2)_기본 튜토리얼

7、Gray ,Invert,Xray 滤镜

语法：{filter:gray} ,{filter:invert},{filter:xray}

Gray滤镜是把一张图片变成灰度图；Invert滤镜是把对象的可视化属性全部翻转，包括色彩、饱和度、和亮度值；Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮，也就是所谓的“X”光片。

效果如下：

8. 빛필터

구문: 필터{빛}

이 속성은 광원의 투사 효과를 시뮬레이션합니다. 객체에 대해 "LIGHT" 필터 속성이 정의되면 해당 "메소드"를 호출하여 속성을 설정하거나 변경할 수 있습니다. "LIGHT"에 사용 가능한 방법은 다음과 같습니다.

• AddAmbient 주변 광원 추가
• AddCone 원뿔 광원 추가
• AddPoint 점광원 추가
• Changcolor 빛의 색상 변경
• Changstrength 광원의 강도를 변경합니다
• 지우기 모든 광원 지우기
• MoveLight 광원 이동

광원의 가상 위치를 정의할 수 있고, X축과 Y축의 값을 조정하여 광원의 초점 위치를 제어할 수도 있습니다. 광원(점 광원 또는 원뿔 광원)의 광원이 경계를 흐리게 하는지 여부, 광원의 색상, 밝기 및 기타 속성을 지정합니다. 광원을 동적으로 설정하면 예상치 못한 효과가 발생할 수 있습니다. 다음 페이지에는 구체적인 예가 나와 있습니다.

9. 마스크 필터

구문: {filter:mask(color=color)}

"MASK" 속성을 사용하면 물체의 표면을 덮는 필름을 만들 수 있습니다. 물체를 보기 위해 색안경을 끼는 것과 같은 효과입니다.

10. 섀도우 필터

구문: {filter:shadow(color=color,direction=direction)}

"Shadow" 속성을 사용하여 지정된 방향으로 개체의 투영을 만듭니다. COLOR는 투영 색상이고 DIRECTION은 투영 방향입니다. 0도는 수직 위쪽을 나타내며 45도마다 하나의 단위입니다. 기본값은 왼쪽으로 270도입니다.

필터:그림자(색상=빨간색,방향=225)
필터:그림자(색상=파란색,방향=225)
필터:그림자(색상=회색,방향=225) )
효과는 다음과 같습니다.

섀도우필터 물처마 티하우스 제작

섀도우필터 물처마 티하우스 제작

섀도우 필터드립 워터 처마 찻집 제작

11. 웨이브 필터 구문: {filter:wave(add=add , freq=freq,lightstrength=strength,phase=phase,strength=strength)}
"wave" 속성은 개체를 수직 파형 스타일로 방해합니다. 기본값은 "TRUE(0이 아님)"입니다.

"ADD"는 개체를 파형 스타일로 방해할지 여부를 나타냅니다.

"FREQ"는 잔물결의 빈도로, 개체에 생성되어야 하는 완전한 잔물결 수를 지정합니다.

"LIGHTSTRENGTH" 매개변수는 잔물결에 대한 빛과 그림자의 효과를 0에서 100까지 향상시킬 수 있습니다.

"PHASE" 매개변수는 사인파의 오프셋을 설정하는 데 사용됩니다.

"STRENGTH"는 진폭을 나타냅니다.