やりたいこと
- 線で囲まれた四角の四隅に、丸を置きたい。
イメージは下記サイトの「1つボックスに複数の画像指定」の部分まんま。
CSS3の背景画像指定について | Designmemo（デザインメモ）-初心者向けWebデザインTips-
やったこと
background-imageを一つの要素に複数適用するためにどうすれば良いか調べた。
下記サイトに載っていたのでそれを参考にした。（書いたコードは一番下のCodepenで見れます。）
backgroundまとめ。ショートハンド、複数指定、各プロパティ - Qiita
backgroundプロパティを複数適用するためには、適用したい数だけ値をカンマで区切れば良い
background-image: url(image.png), url(picture.jpg); background-position: left top, right bottom;
ただ、本当に全プロパティ要素分だけ書かないといけないかまでは検証していない。
たとえば、全値が同じの場合には一つだけ値をかけば良かったりしないのだろうか....。
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
こんなことせずに、
background-repeat: no-repeat;
これではダメなのだろうか。。。要検証...！
Codepen
See the Pen 四隅に丸を配置する by itsumoonazicode (@itsumoonazicode) on CodePen.
