制作链甲背景主题

Question

我想制作这样的锁子甲：

我试过使用线性渐变，但它似乎不起作用

    background: linear-gradient(#0c0c0c, #222222)!important

我希望输出类似于 imgur 中显示的图像。线性渐变会起作用吗？

Answer 1

您可以使用 radial-gradient

我使用了不同的颜色，这样我们可以更好地看到结果：

body {
  margin:0;
  height:100vh;
  background:
    radial-gradient(50% 100%,#000 35%,transparent 50%) 0   0  /10px 10px,
    radial-gradient(50% 100%,#000 35%,transparent 50%) 5px 5px/10px 10px,
    yellow;
}

您可以轻松调整不同的值来控制大小：

body {
  margin:0;
  height:100vh;
  background:
    radial-gradient(50% 100%,#000 25%,transparent 50%) 0   0  /8px 8px,
    radial-gradient(50% 100%,#000 25%,transparent 50%) 4px 4px/8px 8px,
    yellow;
}

制作链甲背景主题

Make chainmail background theme

css

background

css-gradients