8

多くのフロントエンド開発者と同様に、私はボーダー トリックを使用して CSS で三角形をレンダリングしてきました。 http://apps.eky.hk/css-triangle-generator/このジェネレーターはテクニックに役立ちます。

本日、Firefox チームは、レンダリング エンジンに関する明確な変更ログなしで新しいバージョンをリリースしました。

これらの三角形の周りに見苦しい灰色の境界線が表示されます。私はまだそれを取り除くためのトリックを見つけていません。編集：「チェスのような透明な」背景を「緑」のようなものに強制すると、見やすくなります

その上、Firefox 17 より前に、これらの三角形がどのようにエイリアス化されているかについて人々が不満を述べていたとき、追加のトリックは、border-style プロパティを実線ではなく「破線」に設定することでした。

三角形ジェネレーターで firebug を使用すると、現在どのように表示されているかをすぐに確認できます。

誰かがこれの修正を知っていますか?

編集: 推奨されるように border-style:inset を使用すると、FF17 でより明るい色がレンダリングされます

4

2 に答える 2

9

この Adeher の修正と他の点線枠の修正を組み合わせることで、FF23 の問題は完全に解決されるようです。

長い形式で:

border-top: 10px solid #FF0000;
border-left: 30px dotted rgba(255, 0, 0, 0);
border-right: 30px dotted rgba(255, 0, 0, 0);

Adeher の rgba() 修正と点線境界修正 (ただし、透明な境界線のみ) を組み合わせると、醜いぼやけた境界線のない完全な三角形がレンダリングされるようです。

于 2013-09-13T20:14:29.207 に答える
8

これが私がこれまでに持っている最良の解決策です：

三角形のRGB値を取得し、これを三角形の反対側の境界線の「透明」ではなく、不透明度0のRGBAとして使用します。

古い構文を「透過的」ベースのままにしておくと、IE8 のフォールバックとして機能します。

それは次のようなものになります：

border-color: transparent transparent transparent #ffffff;
border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #ffffff;

返信で述べたように：提案されているようにボーダースタイルを「インセット」に設定すると、FF17の色が変わります。

誰かがより簡単な解決策を見つけるか、この投稿が他の人に役立つことを願っています.

于 2012-11-30T08:19:15.997 に答える