丸い角や鋭い角の代わりに文字を使用することに関する研究経験の共有

丸い角や鋭い角の代わりに文字を使用することに関する研究経験の共有

1. フォントと文字表示の関係

左側と右側の鋭角部分は Songti フォントで表示されます: <>
フォントの影響を受けない:<>

ここでは、左と右の鋭角な角は Arial フォントで表示されます: <>
フォントの影響を受けない:<>

左側と右側の鋭角な角は Lucida Sans Unicode で表されます: <>
フォントの影響を受けない:<>

ここで、左と右の鋭角な角は Times New Roman フォントで表示されます: <>
フォントの影響を受けない:<>

左側と右側の鋭角部分は Verdana フォントで表示されます: <>
フォントの影響を受けない:<>

ここでは、上下方向の鋭角は、小さな鋭角のソンティフォントで表されています: ˇ^
フォントの影響を受けない: ∧∨

ここでは、上下方向の鋭角は Arial フォントで、小さな鋭角の角があります: ˇ^
フォントの影響を受けません: ∧∨

上方向と下方向の鋭角は Lucida Sans Unicode フォントで、小さな鋭角: ˇ^
フォントの影響を受けません: ∧∨

上と下の鋭角部分は Times New Roman フォントで、小さな鋭角部分があります: ˇ^
フォントの影響を受けません: ∧∨

ここでは、上下方向の鋭角は Verdana フォントで、小さな鋭角の角があります: ˇ^
フォントの影響を受けない: ∧∨

こちらは45度の角度、フォントはSongtiです:

これはArialフォントで書かれた45度の鋭角の立体です:

以下は Lucida Sans Unicodeでの 45 度の角度です。

45度の角度をTimes New Romanフォントで表すと次のようになります:

45度の角度をVerdanaフォントで表すと次のようになります:

これはしっかりした鋭角の角です。フォントは Songti です: ► ◄ ▲▼

これは、しっかりした鋭角の角です。フォントは Arial です: ► ◄ ▲▼

こちらは実線の角です。フォントは Lucida Sans Unicode です: ► ◄ ▲▼

こちらは角がしっかりしていて、フォントはTimes New Romanです: ► ◄ ▲▼

これはしっかりした鋭角の角です。フォントは Verdana です: ► ◄ ▲▼

これは実線の円です。サイズが限られているため、六角形の実線のように動作します。フォントは Songti です:

これは実線の円です。サイズが限られているため、六角形の実線のように動作します。フォントは Arial です。

これは実線の円です。サイズが限られているため、六角形の実線のように動作します。フォントは Lucida Sans Unicode です。

これは実線の円です。サイズが限られているため、六角形の実線のように動作します。フォントは Times New Roman です。

これは実線の円です。サイズが限られているため、六角形の実線のように動作します。フォントは Verdana です:

ここにソンティ文字のフォントで書かれた中空の円があります:

ここに Arial フォントの白抜きの円があります:

これは Lucida Sans Unicode の白抜きの円です:

これは Times New Roman フォントの白抜きの円です:

ここに Verdana フォントの白抜きの円があります:

これは四分の一弧です。フォントは Songti です: ╰ ╯╭ ╮

Arial フォントの四分の一円は次のとおりです: ╰ ╯╭ ╮

Lucida Sans Unicode の四分の一円は次のとおりです: ╰ ╯╭ ╮

これはTimes New Romanで書かれた四分の一円です: ╰ ╯╭ ╮

ヴェルダナ語で四分の一弧は次のようになります: ╰ ╯╭ ╮

2. 四分の一円を実現する

背景色で丸みを帯びた角の効果を実現するには、4 つの角を 1/4 の実円で塗りつぶします。

CSSコード:

コードをコピー
コードは次のとおりです。

.quarter_round{display:inline-block; width:8px; height:8px; overflow:hidden; font-family:'宋体';}.quarter_round span{display:inline-block; font-size:16px; line-height:1;}.quarter_round .lt{}.quarter_round .rt{margin-left:-7px;}.quarter_round .lb{margin-top:-6px;}.quarter_round .rb{margin:-6px 0 0 -7px;}

HTMLコード:

コードをコピー
コードは次のとおりです。

&lt;span class=&quot;quarter_round&quot;&gt;&lt;span class=&quot;lt&quot;&gt;●&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;quarter_round&quot;&gt;&lt;span class=&quot;rt&quot;&gt;●&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;quarter_round&quot;&gt;&lt;span class=&quot;lb&quot;&gt;●&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;quarter_round&quot;&gt;&lt;span class=&quot;rb&quot;&gt;●&lt;/span&gt;&lt;/span&gt;

3. 単色の背景で角丸長方形を実現する

背景色で丸みを帯びた角の効果を実現するには、4 つの角を 1/4 の実円で塗りつぶします。

4. 背景が単色で角が鋭い丸みのある長方形を実装する

四隅を四分の一の実円で塗りつぶし、鋭角な角のシンボルを追加して、鋭角な角を持つ単色の丸みを帯びた長方形を作成します。

四隅を四分の一の実円で塗りつぶし、鋭角な角のシンボルを追加して、鋭角な角を持つ単色の丸みを帯びた長方形を作成します。

5. Sina Weiboブログのコメントに、鋭角な角を持つ二重境界線の角丸長方形効果を実装する

4 つの角を 1/4 の実円で塗りつぶし、これを 1 回繰り返して、1 ピクセルずつオフセットします。鋭角の角のシンボル、上下 2 ピクセルのオフセット、長方形の二重レイヤー ラベルを追加して、最終的な二重境界線効果を実現します。

◆ ●
4 つの角を 1/4 の実円で塗りつぶし、これを 1 回繰り返して、1 ピクセルずつオフセットします。鋭角の角のシンボル、上下 2 ピクセルのオフセット、長方形の二重レイヤー ラベルを追加して、最終的な二重境界線効果を実現します。

<<:  javascript:void(0) の意味と使用例

>>:  HTML外部参照CSSファイルが効果を発揮しない理由の分析と解決

推薦する

Dockerコミットの使い方の詳しい説明

場合によっては、ベースイメージに特定の依存関係をインストールする必要があります。Dockerfile...

Vueタブとキャッシュページを切り替えるいくつかの方法

目次1. 切り替え方法2. タブを動的に生成する3. キャッシュコンポーネント3.1 キープアライブ...

Mysql の 2 つのテーブル間の結合クエリの 4 つの状況の概要

一般的に言えば、より完全な結果を得るためには、2 つ以上のテーブルから結果を取得する必要があります。...

Linux での Apache サービスの展開と構成

目次1 Apacheの役割2 Apacheのインストール3. Apacheを有効にする4 Apach...

MySQLでのカスタムパラメータの使用に関する詳細な説明

MySQL 変数には、システム変数とシステム変数が含まれます。今回の学習課題はユーザー定義変数です。...

Linux で FastDFS ファイル サーバーを構築するための実装手順

目次1. ソフトウェアパッケージ2. gccをインストールする3. libfastcommonをイン...

MySQLストレージ時間タイプの選択に関する問題の説明

MySQL では、datetime 型は通常、時間を保存するために使用されますが、現在では多くのシス...

Linux の grep コマンドと egrep コマンドの詳細な説明

反復/egrep構文: grep [-cinvABC] 'word' ファイル名-c...

Vueでタイマーをエレガントにクリアする方法

目次序文最適化派生的な質問: beforeDestroy はトリガーされませんか?序文タイマーをクリ...

Django がローカル MySQL データベースに接続する手順 (pycharm)

ステップ1:setting.pyでデータベースを変更する # データベースを構成する DATABAS...

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

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

リクエスト IP の最後のセグメントに基づいてトラフィックを分割するように Nginx を構成する方法

これは主に、場所パラメータのif判断の設定ジャンプです。迂回により、サーバーの負荷と圧力を軽減できま...

クラウドデータ移行サービスの観点から見たMySQLの大規模テーブル抽出モードの原理分析

概要: MySQL JDBC 抽出にはどのような方法を使用すればよいでしょうか? その方法を説明しま...

Linuxで中断されたシステムを呼び出す方法

序文低速システム コールとは、決して戻らない可能性があり、プロセスを永久にブロックするシステム コー...

CSS でリスト スタイル属性を設定する方法 (この記事を読むだけ)

リストスタイルのプロパティHTMLには、順序なしリストと順序ありリストの2種類のリストがあります。仕...