클립 속성은 상대적으로 유용한 속성이지만 실제 응용 프로그램에서는 드문 경우가 많으며 52CSS.com에서는 이 속성을 거의 소개하지 않습니다. 클립 속성을 적용할 때 주의할 두 가지 사항은 다음과 같습니다.
1. 클립 속성은 위치 지정 속성 위치와 함께 사용해야 적용됩니다.
2. 클립 크로핑의 계산 좌표는 그림 3과 같이 왼쪽 상단, 즉 (0,0) 지점부터 계산됩니다. 이는 양쪽의 오른쪽 여백과 아래쪽 여백과 다릅니다. 가장 오른쪽 지점부터 계산됩니다.
클립 속성의 기본 구문: 
예제 소스 코드
[www.downcodes.com] 클립 : 자동 | 각형 ( 번호 번호 번호 )
값:
자동: 기본값입니다. 개체 잘림 없음
ret(number number number): (0,0) 좌표에 대해 객체의 왼쪽 상단에서 계산된 4개의 오프셋 값을 위-오른쪽-아래-왼쪽 순서로 제공합니다. 자동으로 교체할 수 있습니다. 즉, 이쪽은 자르지 마십시오.
객체의 가시 영역을 검색하거나 설정합니다. 보기 영역 외부의 부분은 투명합니다.
이 속성은 절대 위치에 있는 객체의 가시 영역 크기를 정의합니다. 이 속성을 사용하려면 position 속성의 값을 절대값으로 설정해야 합니다.
이 속성은 IE5부터 MAC 플랫폼에서 사용할 수 있습니다.
해당 스크립트 속성은 클립입니다.
컬러 텍스트를 만드는 것 외에도 CSS의 클립 속성은 다른 웹페이지의 요소를 효과적으로 자를 수도 있습니다.
클립 속성은 요소의 모양을 설정합니다. 이 속성은 클리핑 사각형을 정의하는 데 사용됩니다. 이 직사각형 내의 콘텐츠만 표시되며, 이 클리핑 영역 외부의 콘텐츠는 Overflow:hidden과 동일한 효과를 갖습니다. 클리핑 영역은 요소의 콘텐츠 영역보다 크거나 작을 수 있습니다.
클립 속성 값: auto | ect(상단, 오른쪽, 하단, 왼쪽)
자동은 자르지 않음을 의미합니다. 사각형의 네 방향은 자르기 위치를 나타내는 숫자 값으로 채워져야 합니다.
아래에서는 이미지 자르기에 대한 간단한 예를 보여 드리겠습니다.
먼저 그림 1과 같이 사진을 준비합니다. 크기는 159px*99픽셀입니다. 이미지에서 큰 빨간 점만 표시되도록 이미지를 자르는 데 클립 속성을 사용할 계획입니다.
먼저 이미지를 배치할 div 프레임을 만듭니다. 해당 CSS는 다음과 같이 정의됩니다.
예제 소스 코드
[www.downcodes.com] #imgClip {
위치:상대적;
너비:159px;
높이:99px;
배경:#FFF985;
여백:0 자동;
}
이 div의 positioning 속성은 이미지의 위치 지정 기준으로 사용하기 위해 상대 위치 지정으로 설정되어 있으며 표시 효과를 보다 명확하게 하기 위해 배경을 #FFF985로 정의합니다.
그런 다음 이미지의 자르기 속성을 정의합니다. CSS 정의는 다음과 같습니다.
예제 소스 코드
[www.downcodes.com] #imgClip img {
위치:절대;
클립:정사각형(21px 68px 51px 38px);
}
여기서 절대 위치 지정은 id가 imgClip인 div를 기준으로 합니다. 클립의 값은 위쪽, 오른쪽, 아래쪽, 왼쪽의 순서로 배열됩니다.
HTML 코드:
예제 소스 코드
[www.downcodes.com]