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

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

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ファイルが効果を発揮しない理由の分析と解決

推薦する

Apache ソースコードのインストールと仮想ホストの設定に関する詳細なチュートリアル

ソースからApacheをインストールする1. Apacheソースコードをアップロードして必要なソフト...

Alibaba CloudにMySQLをインストールする方法の詳細な説明

軽量のオープンソース データベースである MySQL は、エンタープライズ レベルのアプリケーション...

Vue のミックスインの使用方法の詳細な説明

目次序文1. Mixin とは何ですか? 2. Mixin はいつ使用すればよいですか? 3. Mi...

Vue ログインページ用の動的パーティクル背景プラグインの実装

目次動的パーティクル効果は次のとおりです。プラグインをインストールする動的パーティクル効果は次のとお...

vue2 vue3 での Echarts の詳細な使用方法

目次1. インストール2. vue2でEchartsを使用するmain.jsファイル内コンテナが与え...

nginxリバースプロキシを使用するときに長時間接続を維持する方法

・【シーン説明】 HTTP1.1 以降、HTTP プロトコルは永続的な接続 (長い接続とも呼ばれます...

Dockerfile を使用して Java ランタイム環境のミラーを作成する方法

現在の環境は次のとおりです。セントロス7.5 docker-ce 18.06.1-ce 1. まずc...

MySQL での %% のようなファジークエリの実装

1、%: 0 個以上の任意の文字を表します。あらゆるタイプと長さの文字に一致します。場合によっては、...

Vue でのテキストエリア適応高さソリューションの実装

目次隠れた問題適応高さのソリューションまず解決策を提示してください。Vueスタックが必要な学生はvu...

Linux (Ubuntu 18.04) に Anaconda をインストールする詳細な手順

Anaconda は、大規模なデータ処理、予測分析、科学計算のための最も人気のある Python デ...

VMware Workstation 15 Pro インストール ガイド (初心者向け)

01. VMware Workstation Pro 15 のダウンロードダウンロード: VMwa...

バックエンドから返される 100,000 個のデータをフロントエンドでより適切に表示するにはどうすればよいですか?

目次予備作業バックエンド構築フロントエンドページダイレクトレンダリングsetTimeout ページン...

Vueライフサイクルの詳細な説明

目次ライフサイクルを理解する理由ライフサイクルとはライフサイクルフック関数作成され、マウントされたフ...

Windows (x86、64 ビット) で MySQL 5.7.17 無料インストール バージョンをアップグレードするための詳細なチュートリアル

Laravel 5.4 のデフォルトの utf8mb64 文字エンコーディングをサポートするには、M...

JDBC を使用して Mysql データベースに接続する際に発生する可能性のある問題の概要

まず、いくつかの概念を明確にします。 JDBC: Javaデータベース接続、Oricalによって規定...