CSS绘图:尾巴

预备知识

如果你想要理解实现方法,你需要先了解以下知识:

  • 线性渐变
  • 径向渐变
  • 复杂背景图案

尾巴图案背景

CSS代码

background:

radial-gradient( transparent 30px, #9ba7b1 30px, #9ba7b1) 0 0,

radial-gradient( #deeefe 30px, transparent 30px, transparent) 30px 30px;

background-color:#9ba7b1;

background-size: 64px 64px;

重复单元
图层一效果
background: radial-gradient( transparent 30px, #9ba7b1 30px, #9ba7b1) 0 0
图层二效果
radial-gradient( #deeefe 30px, transparent 30px, transparent) 30px 30px

你可能感兴趣的:(html,css,html5,css3)