【CSS】布地風ボックスをCSSで作ってみる！ - Tech.log今回は、布地風ボックスをCSSで作る方法を紹介したいと思います。 まずはベースとなるCSSコードを紹介した後、簡単なカスタムパターンをいくつか紹介していきたいと思います。 目次 目次 ベースコード 使い方 カスタムパターン 背景を赤系にしてみる 角丸表示にしてみる 青バージョン 赤バージョン 丸みマシマシバージョン まとめ ベースコード 早速ですが、布地風のボックスは以下のようなCSSで実現することができます。 .box.cloth { padding: 0.3rem 0.6rem; margin: 1.5rem 0; background: #a6c3e5; box-shadow: 0 0 0 8px #a6c3e5; border: 1.8px dashed #f1f1f1; } .box.cloth p { margin: 0; padding: 0; } 使い方 以下のようにスタイ
