1

を使用して Retina 品質の CSS マスキングを実現することは可能-webkit-mask-box-imageですか? この特定のケースでは、要素の角を丸くしようとしています (border-radius十分なパフォーマンスが得られません)。

.element {
    -webkit-mask-box-image: url('mask.png') 12 12 12 12 stretch stretch;
}

マスク イメージは、必要なサイズの 2 倍になります (非 Retina スクリーンの6代わりに が使用されます)。12

マスクは正しく配置されていますが、コーナーの丸みは Retina のように滑らかではありません。

4

1 に答える 1

1

ここに 3 つの解決策があります。

  • 最新のマシンではそれほどラグが発生しないため、それを吸い込んで境界半径に対処してください。さらに、Safari と Chrome (および RockMelt、Yandex などのマイナーな Webkit ベースのブラウザー) のみが を使用する-webkit-maskため、Chrome アプリを作成していない限り、多くのユーザー (現在約 54.25%) をブラウザーに奪われています。非互換性は言うまでもなく、丸みを帯びた角を見るためだけにユーザーが画像をダウンロードする必要があることは言うまでもありません。
  • Webkit はスケーリング アルゴリズム内で画像の平滑化を使用するため、単純に巨大なマスク画像を提供し、ロード時に 1 回だけスケーリングを実行させます。これには、ダウンロードに時間がかかり、スケーリングに時間がかかるという固有の欠点がありますが、これもキャッシュがクリアされるまでの 1 回限りのことです。
  • PNG を使用する代わりに、SVG を使用します。Scalable V‍ector G ‍raphicsの要点は、無限にスケーラブルで、どのような解像度やサイズでも品質が低下しないことです。SVG ファイルの作成方法の詳細については、http://www.w3.org/Graphics/SVG/を参照してください。
于 2012-11-14T13:47:46.903 に答える