css3 のいくつかの非表示の高度なプロパティの Gecko 固有のプロパティの使用方法の詳細な説明

font-size-adjust

この便利な CSS3 プロパティは、現在 Firefox でのみサポートされています。これを使用して、指定した要素のテキスト サイズ (font-size) を、大文字の高さ (キャップの高さ) ではなく小文字の高さ (x-height) に相対するように設定できます。たとえば、Verdana は同じモデルの Times フォントよりも鮮明で、X 高さが短くなります。この欠陥を補うために、font-size-adjust プロパティを使用して後者を修正できます。

このプロパティは、X 高さが異なるフォントに非常に役立ちます。小さなフォント サイズを使用するように注意している場合でも、問題が発生した場合は font-size-adjust が解決策を提供します。

例

何らかの理由で 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 です。同じアルゴリズムが optimizeSpeed でも使用されますが、auto と optimizeQuality は標準動作 (要素を可能な限り最高の品質でスケールする) として定義されています。 image-rendering 属性は、背景画像で使用されるのと同様に、

-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 の省略形がないため、各境界線を個別に設定する必要があります。同時に、border-width は指定された色の数と一致している必要があります。そうでない場合は、最後の色の値が残りの幅を埋めてしまいます。

例

この例では、要素の左右の境界線は標準のオレンジ色になり、上下の境界線は赤、黄、青のグラデーションのような色になります。

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

ブラウザのサポート: Gecko.

以上がcss3 のいくつかの非表示の高度なプロパティの Gecko 固有のプロパティの使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。