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 イベント委任の原則

推薦する

マルチコア CPU を使用して Linux コマンドを高速化する方法 (GNU Parallel)

非常に大量のデータ(数百 GB)を計算する必要があったことはありますか?または、その内部を検索したり...

Nodeはkoa2を使用してシンプルなJWT認証方式を実装します

JWT の紹介JWTとは正式名称はJSON Web Tokenで、現在最も人気のあるクロスドメイン認...

ボタンの 4 つのクリック応答方法の概要

ボタンは頻繁に使用されます。ここでは、イベント処理メソッドを整理し、実装方法が多数あることを発見しま...

Docker コンテナで ASP.NET Core を実行する手順

最近は学ぶべき知識が多すぎて、どれを先に学べばいいのかわかりません。このブログはもともとxamari...

CSS の無効な行の高さ設定の問題の解決策

CSS の無効な行の高さ設定についてまず、次のコード文字列を記述します。 <!DOCTYPE ...

CSS3 で背景ぼかしを実現する 3 つの方法 (要約)

1. 通常の背景ぼかしコード: <スタイル> html, 体 { 幅: 100%; 高...

ハンドラー PageHandlerFactory-Integrated のモジュール リストに不正なモジュール ManagedPipelineHandler が含まれています

Web プロジェクトを開発する場合、IIS をインストールする必要があります。IIS がインストール...

Chromeブラウザ設定の新バージョンではクロスドメイン実装が可能

序文現在、フロントエンドは主に webpack の devServer の構成を通じてクロスドメイン...

JavaScript の数値および数学オブジェクトの概要

目次1. JavaScript における数値2. Javascript の Math オブジェクト1...

CentOS7.5 の MySQL8.0.19 のインストールチュートリアルの詳細な手順

1. はじめにこの記事には MySQL インストール部分のスクリーンショットがないので、ある程度の基...

Dockerコンテナオーケストレーション実装プロセス分析

実際の開発環境や本番環境では、コンテナを独立して実行することはあまりなく、複数のコンテナを一緒に実行...

spanタグのスタイルに幅属性を設定する方法

span タグのスタイルに width 属性を直接設定すると、効果がないことがわかります。 disp...

Linux の 5 ステップ ビルド カーネル ツリー

目次0. システムに付属するカーネルツリー1. 環境設定最初のステップステップ2 2. ソースコード...

div+css3 を使用して背景グラデーション ボタンを実装するためのサンプル コード

フロントエンド ページの需要が増加し続けるにつれて、一部のシーンではグラデーションの背景要素が必要に...

Centos7 で yum を使用して Mysql5.7.19 をインストールする詳細な手順

Centos7 の yum ソースには、mysql の代わりに mariaDB が使用されているため...