CSS3 で transform を使用した場合のフォントぼかしの解決方法の詳細な説明

CSS3 で transform を使用した場合のフォントぼかしの解決方法の詳細な説明

この質問は非常に奇妙なので、あまり多くを語らずにコードに直接進みます。

.g-ダイアログラッパー{
    位置: 固定;
    上位: 50%;
    左: 50%;
    変換: translate(-50%, -50%);

    ディスプレイ: フレックス;
    flex-direction: 列;
    幅: 405ピクセル;
    背景色: #ffffff;
    高さ: 226px;
    -webkit-box-shadow: 0 0 2em #5191f1;
    -moz-box-shadow: 0 0 2em #5191f1;
    ボックスシャドウ: 0 0 2em #5191f1;
    境界線の半径: 3px;
    zインデックス: 9999;
  }

上記の CSS スタイルにより、ページのフォントがぼやけてしまいます。

這里寫圖片描述

ネットで調べたところ、ブラウザのレンダリングに問題があるようです。transform の値はベースとして設定できませんが、ベースではないことを明確に述べました。

変換: translate(-50%, -50%);

後でいくつか変更を加えて、幅と高さを偶数に変更しました。

幅: 404ピクセル;
高さ: 226px; 

這里寫圖片描述

CSS3 で transform を使用したときにフォントがぼやける問題を解決する方法についての記事はこれで終わりです。CSS3 で transform を使用したときにフォントがぼやける問題の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  MySQLが数十億のトラフィックをサポートする方法

>>:  JavaScript イベント委任の原則

推薦する

innerHTML アプリケーション

ブランクのブログ: http://www.planabc.net/ innerHTML プロパティは...

JavaScript 組み込みオブジェクトの概要

目次1. 組み込みオブジェクト2. 数学オブジェクト1. Mathオブジェクトの使用2. 指定された...

HTMLからReactを実装する方法を教えます

ReactとはReact は、効率的で高速なユーザー インターフェイスを構築するためのシンプルな J...

HTML の著作権記号のフォント選択問題 (著作権記号をより美しくする方法)

1. 問題を発見する&copy; は HTML の著作権記号ですが、間違ったフォントを選択す...

ネストされた HTML ページの使用例 (フレームセットの使用)

コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...

JS配列ループ方式と効率分析の比較

配列メソッドJavaScript には多くの配列メソッドが用意されています。次の図は、ほとんどの配列...

React における同期および非同期 setState の問題のコード分析

React は Facebook の社内プロジェクトとして始まりました。 React の出現は革命的...

Ubuntu システムでタイムゾーンと時刻を変更する方法

Linux コンピュータには 2 つの時間があります。1 つはハードウェア時間 (BIOS に記録さ...

HTML テーブル マークアップ チュートリアル (4): 境界線の色属性 BORDERCOLOR

テーブルを美しくするために、テーブルにさまざまな境界線の色を設定できます。基本的な構文<テーブ...

同じドメイン名を持つ Nginx プロキシのフロントエンドとバックエンドの分離プロジェクトの完全な手順

フロントエンド プロジェクトとバックエンド プロジェクトは分離されており、フロントエンドとバックエン...

MySQL サーバーの接続、切断、および cmd 操作

mysql コマンドを使用して MySQL サーバーに接続します。 MySQL サーバーが起動したら...

ウェブページのFOUC問題によるウェブページの混乱の解決策

FOUC は Flash of Unstyled Content の略で、FOUC と略されます。簡...

MySql 8.0.11 のインストールと設定のチュートリアル

公式ウェブサイトアドレス: https://dev.mysql.com/downloads/mysq...

HTML の相対パスと絶対パスの違いの分析

HTML 初心者は、ファイルを正しく参照する方法という問題によく遭遇します。たとえば、HTML ペー...

CSS最適化スキルの自己実践体験

1. CSS スプライトを使用します。利点は、CSS で使用される小さな画像を 1 つの大きな画像に...