以下に示すように、あなたならどのようにそれを達成しますか: 通常、フォントアイコンを使用して中央にプラス記号を表示し、外側を 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
今日私が書こうとしている内容では、プログラムは 7 時間近く実行され、データベースに 1,000 万...
1. ポート2375を開くdocker.serviceを編集する vim /lib/systemd/...
ポート マッピングは、Docker を別のコンテナーに接続する唯一の方法ではありません。 Docke...
目次1. 二重連結リストとは何か2. 双方向リンクリストのカプセル化3. 双方向リンクリストの一般的...
背景インデックスは諸刃の剣です。クエリ速度は向上しますが、DML 操作も遅くなります。結局のところ、...
目次1. 親コンポーネントと子コンポーネント間の一方向の値転送1. 親から子への値の受け渡し2. 子...
1. 物件リストコードをコピーコードは次のとおりです。色: #999999 テキスト色フォントファミ...
天気予報をウェブサイトに挿入すると、次のような効果が得られます。次のコードを挿入する必要があります:...
<em></em> などのフレーズ要素を使用すると、意図した視覚スタイルを維...
目次1. 概要2. JSON基本ツール3. JSONパス式4. JSONを検索して変更する序文:長い...
目次1. 概要2. シンプルなクラスを定義する3. 継承4. public、private、prot...
目次1. MySQL マスタースレーブレプリケーションの原理2. MySQLのコンパイルとインストー...
操作前に必ずお読みください:注意:管理に rancher を使用する場合は、k8s クラスターが構築...
CSS の背景: background:#00ffee; //背景色を設定するbackground-...
以下のように表示されます。 def test_write(self): フィールド=[] field...