以下に示すように、あなたならどのようにそれを達成しますか: 通常、フォントアイコンを使用して中央にプラス記号を表示し、外側を 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
一部の Web ページは大きく見えなくても開くのに非常に時間がかかる場合があります。一方、他の We...
MySQL でサポートされている浮動小数点型は、 FLOAT 、 DOUBLE 、およびDECIMA...
厳密に言えば、nginx には負荷分散バックエンド ノードのヘルス チェック機能はありませんが、デフ...
質問はhttps://www.zhihu.com/question/440066129/answer...
docker-compose.yml に extra_hosts キーワードを追加すると、コンテナの...
まず、MySQL バックアップ コマンド mysqldump の一般的な操作例をいくつか紹介します。...
1. 複数列レイアウトではなく、単一列レイアウトを使用する1 列のレイアウトにより、全体的な状況をよ...
まず、方法を理解します。 docker exec を使用して Docker コンテナに入るDocke...
目次1. ES 構文のゲッターとセッター2. ES構文でのdefineProperty 3. Vue...
<br />この記事は主に、初心者にXHTMLの基本知識と、XHTMLとHTMLの違いを...
1. 要件の説明Divタグの右上隅に削除アイコンを表示します2. 実装html、CSS 3. 参照コ...
Docker の導入規模が大きくなると、コンテナを監視する必要があります。一般的に、Docker に...
この初心者は、Docker を学び始めたばかりの頃にこのような問題に遭遇しました。記録しておきます。...
1. ダウンロード参考: 2. D:\MySQL\mysql-5.7.24 などの固定の場所に解凍し...
CJK は CJK Unified Ideographs の略称で、「中国語、日本語、韓国語の統一表...