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 コード

推薦する

MySQL の if 関数の正しい使い方の詳細な説明

今日私が書こうとしている内容では、プログラムは 7 時間近く実行され、データベースに 1,000 万...

Dockerコンテナの接続と通信の実装

ポート マッピングは、Docker を別のコンテナーに接続する唯一の方法ではありません。 Docke...

JavaScriptは双方向リンクリストプロセス分析を実装します

目次1. 二重連結リストとは何か2. 双方向リンクリストのカプセル化3. 双方向リンクリストの一般的...

MySQL 8 の新機能: 非表示のインデックス

背景インデックスは諸刃の剣です。クエリ速度は向上しますが、DML 操作も遅くなります。結局のところ、...

フロントエンドフレームワーク Vue における親子コンポーネントデータの双方向バインディングの実装

目次1. 親コンポーネントと子コンポーネント間の一方向の値転送1. 親から子への値の受け渡し2. 子...

DIV共通属性コレクション

1. 物件リストコードをコピーコードは次のとおりです。色: #999999 テキスト色フォントファミ...

ウェブサイトに天気予報を挿入する方法

天気予報をウェブサイトに挿入すると、次のような効果が得られます。次のコードを挿入する必要があります:...

HTML の小さなタグの使用に関するヒント

<em></em> などのフレーズ要素を使用すると、意図した視覚スタイルを維...

MySQL 8.0はJSONを扱えるようになりました

目次1. 概要2. JSON基本ツール3. JSONパス式4. JSONを検索して変更する序文:長い...

TypeScript のクラス

目次1. 概要2. シンプルなクラスを定義する3. 継承4. public、private、prot...

mysql5.6 マスタースレーブ設定と非同期の問題の詳細な説明

目次1. MySQL マスタースレーブレプリケーションの原理2. MySQLのコンパイルとインストー...

Docker で Rancher をデプロイする方法 (落とし穴なし)

操作前に必ずお読みください:注意:管理に rancher を使用する場合は、k8s クラスターが構築...

CSSの一般的なプロパティ

CSS の背景: background:#00ffee; //背景色を設定するbackground-...

Pythonは出力をcsv操作に書き込む

以下のように表示されます。 def test_write(self): フィールド=[] field...