CSS3의 일부 숨겨진 고급 속성에 대한 Gecko 관련 속성의 사용에 대한 자세한 설명

font-size-adjust

이 유용한 CSS3 속성은 현재 Firefox에서만 지원됩니다. 이를 사용하여 지정된 요소의 텍스트 크기(글꼴 크기)를 대문자 높이(대문자 높이) 대신 소문자 높이(x 높이)에 상대적으로 설정해야 합니다. 예를 들어 Verdana는 동일한 모델의 Times 글꼴보다 더 선명하고 x 높이가 더 짧습니다. 이 결함을 보완하기 위해 글꼴 크기 조정 속성을 사용하여 후자를 수정할 수 있습니다.

이 속성은 x 높이가 다른 글꼴에 매우 유용합니다. 작은 글꼴 크기를 조심스럽게 사용하더라도 문제가 발생할 경우 글꼴 크기 조정을 통해 해결책을 제공할 수 있습니다.

예

어떤 이유로든 Verdana가 사용자 컴퓨터에 설치되지 않은 경우 Arial은 Verdana(0.58)와 동일한 화면 비율을 갖도록 수정됩니다.

   p {
font-family:Verdana, Arial, sans-serif;
font-size: 12px;
font-size-adjust: 0.58;
}

브라우저 지원: Gecko.

image-rendering

몇 년 전에는 이미지가 원래 크기에 따라 표시되지 않고 디자이너에 의해 축소되었습니다. 확대/축소 크기 및 상황에 따라 이미지가 브라우저에 제대로 표시되지 않거나 단순히 누락될 수 있습니다. 이제 브라우저에는 크기가 조정된 이미지를 표시하기 위한 더 나은 알고리즘이 있지만 크기가 조정될 때 이미지의 동작을 완벽하게 제어할 수 있으면 좋을 것입니다.

이 Gecko 사유 재산은 이미지의 선이 더 선명하고 크기 조정 후에도 선을 유지하려는 경우 특히 유용합니다. 관련 값은 -moz-crisp-edges입니다. 동일한 알고리즘이optimSpeed에 사용되는 반면, auto 및optimQuality는 표준 동작(가능한 최고의 품질을 갖는 요소 크기 조정)으로 정의됩니다. 이미지 렌더링 속성은 배경 이미지에 사용되는 것처럼 39000f942b2545a5315c57fa3276f220 및 5ba626b379994d53f7acf72a64f9b697 요소에도 사용할 수 있습니다. 이는 CSS3 표준 속성이지만 현재 Firefox에서만 지원됩니다.

-ms-interpolation-mode: bicubic은 IE 전용 속성이지만 주목할 가치가 있습니다. 그러나 Internet Explorer 7에서는 크기를 조정한 후 이미지를 더 높은 품질로 렌더링합니다. 이 브라우저는 기본적으로 제대로 처리하지 못하므로 이 속성이 유용할 수 있습니다.

브라우저 지원: Gecko.

-moz-border-top-colors

이 속성은 '아이 캔디'로 분류될 수 있습니다. 테두리 너비가 1px보다 큰 경우 다양한 테두리 색상을 설정할 수 있습니다. 물론 -moz-border-bottom-colors, -moz-border-left-colors 및 -moz-border-right-colors도 사용할 수 있습니다.

아쉽게도 -moz-border-colors의 약어가 없으므로 각 테두리를 별도로 설정해야 합니다. 동시에 테두리 너비는 지정된 색상 수와 일치해야 합니다. 그렇지 않으면 마지막 색상 값이 나머지 너비를 채웁니다.

예

이 예에서 요소의 왼쪽과 오른쪽 테두리는 표준 주황색이고 위쪽과 아래쪽은 빨간색, 노란색, 파란색 등 그라데이션과 같은 색상을 갖습니다.

div {
border: 3px solid orange;
-moz-border-top-colors: red yellow blue;
-moz-border-bottom-colors: red yellow blue;
}

브라우저 지원: Gecko.

위 내용은 CSS3의 일부 숨겨진 고급 속성에 대한 Gecko 관련 속성의 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!