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 ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!