透明棋盘格背景样式的两种写法

开发调优
,
1

效果图

image
image717×352 2.81 KB

代码

<div id='one'>1</div>
<div id='two'>2</div>

<style>
div {
  width: 300px;
  height: 300px;
  border: 1px solid #ffffff;
  font-size: 4em;
  color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

1. conic-gradient

#one {
  background: conic-gradient(
    #fff 0 90deg,
    #ddd 90deg 180deg,
    #fff 180deg 270deg,
    #ddd 270deg
  );
  background-size: 60px 60px;
}

2. repeating-conic-gradient

#two {
  background-image: 
    repeating-conic-gradient(#ddd 0 100grad, #fff 0 200grad);
  background-size: 60px 60px;
}
2 个赞
2

操作歪了，就这样吧~

1 个赞
3

大佬太强了 :tieba_087:

3 个赞
4

好快的啵啵啵

4 个赞
5

好快的鹅鹅鹅

2 个赞
6

这代码操作，太细了！

你们仨好快！

1 个赞
7

好快的大帅哥

1 个赞
8

大佬太强了 :tieba_087:
bbb巨佬，鹅老师，大帅哥太快了 :tieba_087:

1 个赞
9

好快的大水哥！