背景ドット
radial-gradient：ほとんどのブラウザ（IE10以降）でベンダープレフィックス必要なし。
※但し「transparent」はsafariで上手く表示されない場合があるので「rgba(255, 255, 255, 0)」にしておくことで回避。
パターンA
.dotA {
background-color: #fafdff;
background-image: radial-gradient(#d5e9f7 30%, rgba(255, 255, 255, 0) 30%);
background-size: 25px 25px;
}
パターンB
.dotB {
background-color: #fafdff;
background-image: radial-gradient(#d5e9f7 25%, rgba(255, 255, 255, 0) 30%), radial-gradient(#d5e9f7 25%, rgba(255, 255, 255, 0) 30%);
background-size: 15px 15px;
background-position: 0 0, 8px 8px;
}
パターンC
.dotC {
background-color: #fafdff;
background-image: radial-gradient(#d5e9f7 30%, rgba(255, 255, 255, 0) 33%), radial-gradient(#d5e9f7 30%, rgba(255, 255, 255, 0) 33%);
background-size: 8px 8px;
background-position: 0 0, 4px 4px;
}
パターンD
.dotD {
background-image: radial-gradient(#d5e9f7 1px, #fff 1px);
background-size: 10px 10px;
}
