如何创建设计点缀背景

Question

你知道如何创建虚线背景吗：

https://www.123rf.com/photo_55576363_stock-vector-halftone-seamless-pattern-abstract-background-with-black-dots-.html

只有css代码？我不知道如何创建这种形状和阴影效果，谷歌无法帮助我。 :-) 我只能做如下基本步骤：

.dotted {
  padding: 2.25em 1.6875em;
  background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, #383e42 1px, #0c0d0e 100%);
  background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, #383e42 1px, #0c0d0e 100%);
  background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, #383e42 1px, #0c0d0e 100%);
  background-image: repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, #383e42 1px, #0c0d0e 100%);
  -webkit-background-size: 3px 3px;
  -moz-background-size: 3px 3px;
  background-size: 3px 3px;
  }

Answer 1

您可以使用drop-shadow 过滤器结合radial-gradient() 来近似此值

html {
  background:#444444;

}
html::before {
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:radial-gradient(farthest-side,black 70%,transparent 80%) 0 0/30px 30px;
  filter:drop-shadow(-2px 2px 2px #fff);
}

像下面这样更接近你的模式：

html {
  background:#494949;
}

html::before,
html::after {
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

html::before {
  --c:radial-gradient(circle 10px at 10px 10px,black 90%,transparent);
  background: var(--c) 0 0,var(--c) 20px 25px;
  background-size:40px 50px;
  filter:drop-shadow(-2px 2px 2px #fff);
}
html::after {
  background:radial-gradient(transparent,#040404);
}