CSSを使用してファイルアップロードパターンを描画する

CSSを使用してファイルアップロードパターンを描画する

以下に示すように、あなたならどのようにそれを達成しますか:

通常、フォントアイコンを使用して中央にプラス記号を表示し、外側を div で囲むか、疑似要素を使用して中央の水平線と垂直線をシミュレートしますが、これはより面倒です。

実際、div + css を直接使用してこれを実現できます。

概要

アウトライン プロパティは、たとえば 1 つ以上の個別のアウトライン プロパティを設定するためのショートカット プロパティです。

輪郭には次のプロパティがあります。

{
    アウトラインスタイル: solid;
    アウトライン幅: 10px;
    アウトライン色: 赤;
}

短縮形もあります:

{
    アウトライン: 10px 赤
}

概要の特徴

アウトラインはスペースを占有せず、コンテンツの上に描画されます。

次のような効果が得られます。

outline-offset を負の値に設定すると、アウトラインが div 内に表示されることがわかりました。負の値を拡大し続けると、アウトラインは最終的に「➕」プラス記号に縮小され、ファイルアップロード スタイルの中央のプラス記号として使用できます。

これは興味深いので、コードを以下に示します。

div {
    マージン: 100px;
    幅: 100ピクセル;
    高さ: 100px;
    アウトライン: 15px 実線 #545454;
    アウトラインオフセット: -66px;
    境界線: 2px 実線 #545454;
}

outline-offset: -66px; がキーで、div の端からのアウトラインの距離を表します。負の値の場合、内側に縮小され、最終的にプラス記号が形成されます。アップロードされた特定のスタイルのサイズとアウトラインの幅は、調和を実現するために自分でゆっくりと調整する必要があります。

以下の点に注意してください。

容器は正方形でなければならない

アウトラインの境界線の幅は小さすぎることはできない

オリジナルの github リポジトリ アドレス: https://github.com/Daotin/front-end-notes/issues

要約する

以上が、CSS を使用してファイルアップロード パターンを描画する方法についてご紹介したものです。お役に立てれば幸いです。ご質問がある場合は、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<:  テーブル関連の配置とJavascript操作テーブル、tr、td

>>:  複数人チャットルームを実現する js コード

推薦する

ウェブページのメモリ使用量とCPU使用量を削減する方法

一部の Web ページは大きく見えなくても開くのに非常に時間がかかる場合があります。一方、他の We...

MySQL における 10 進数型の使用法の簡単な紹介

MySQL でサポートされている浮動小数点型は、 FLOAT 、 DOUBLE 、およびDECIMA...

Nginx の負荷分散構成、ダウンタイム発生時の自動切り替えモード

厳密に言えば、nginx には負荷分散バックエンド ノードのヘルス チェック機能はありませんが、デフ...

MySQL の大きなテーブルで大量のデータを一括削除する方法

質問はhttps://www.zhihu.com/question/440066129/answer...

Docker コンテナのカスタム ホストのネットワーク アクセス操作

docker-compose.yml に extra_hosts キーワードを追加すると、コンテナの...

PHP スケジュールバックアップ MySQL および mysqldump 構文パラメータの詳細

まず、MySQL バックアップ コマンド mysqldump の一般的な操作例をいくつか紹介します。...

優れたユーザー インターフェース デザインのための 37 のヒント (画像付き)

1. 複数列レイアウトではなく、単一列レイアウトを使用する1 列のレイアウトにより、全体的な状況をよ...

docker で nginx+php+mysql を設定する方法

まず、方法を理解します。 docker exec を使用して Docker コンテナに入るDocke...

Vue のデータ応答性に関する詳細な理解

目次1. ES 構文のゲッターとセッター2. ES構文でのdefineProperty 3. Vue...

XHTML Web ページ チュートリアル

<br />この記事は主に、初心者にXHTMLの基本知識と、XHTMLとHTMLの違いを...

HTML+CSS で div タグの右上隅に削除アイコンを追加するサンプルコード

1. 要件の説明Divタグの右上隅に削除アイコンを表示します2. 実装html、CSS 3. 参照コ...

Dockerコンテナ監視とログ管理の実装プロセス分析

Docker の導入規模が大きくなると、コンテナを監視する必要があります。一般的に、Docker に...

Dockerは異常なコンテナ操作を排除する

この初心者は、Docker を学び始めたばかりの頃にこのような問題に遭遇しました。記録しておきます。...

mysql5.7.24 バージョンのインストール手順と解凍時に発生した問題の概要

1. ダウンロード参考: 2. D:\MySQL\mysql-5.7.24 などの固定の場所に解凍し...

Unicode における CJK (中国語、日本語、韓国語の統合表意文字) 文字の概要

CJK は CJK Unified Ideographs の略称で、「中国語、日本語、韓国語の統一表...