CSSの詳しい取り扱い説明書です【機能辞典】

水玉模様の設定の仕方 ページ36

CSSだけで水玉模様ってつくれるの知ってましたか？


実は設定の仕方ではできるんです！画像を使わなくても色のみで設定できちゃいます



ソ−スは

margin: 1em 0;
padding: 1em;
background-color: 色;
background-image: radial-gradient(色 20%, transparent 0), radial-gradient( 色 20%, transparent 0);
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
border-radius: 10px;


例：margin: 1em 0;
padding: 1em;
background-color: #bbdefb;
background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0);
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
border-radius: 10px;


こんな感じ↓







ここで重要なのが background-image:の部分です、ぶっちゃけ後の設定はそんなに大事ではないですね

ルーズリーフ風の囲み線→←ストライブ風のボックス

→ 目次へ｜作品を作る｜感想を書く
他の作品を探す