【凡哥教程第十一讲作业】制作方格纸（CSS渐变之线性渐变）

令狐冲

这表格看似简单，其实很难
要完全封口，又不能重叠，是吧？
我是做不到，看见代码就头晕
静静，你们辛苦了。。。

凡哥

花简静 发表于 2024-8-2 12:46
咖啡说不用谢，为老师效劳很荣幸。

都下肚了还能说话

花简静

柒玥 发表于 2024-8-2 13:54
.box1 {
    position: relative;
    width: 600px;

花简静

凡哥 发表于 2024-8-2 19:52
都下肚了还能说话

这是个有灵性的咖啡，肚子里说啥都能知道

花简静

令狐冲 发表于 2024-8-2 15:06
这表格看似简单，其实很难
要完全封口，又不能重叠，是吧？
我是做不到，看见代码就头晕

是这意思，你一看就懂了

花简静

柒玥 发表于 2024-8-2 13:55
静静给看看咋整的，需要改动哪里

transparent 12px,   （透明12）对
red 12px 13px,        （红线13-12=1）也对
transparent 13px 27px,（透明应该是12，这里就错了，要改。）（正确：把27改为25  25-13=12）
blue 27px 20px,           （蓝线应该是1，这里也错了。）（把27改成25后，设成25 26）
transparent 0 22px),      
（这个透明是0，其实也要是12.它是铺剩下的空间，把它当成12计算总空间：12+1+12+1+12=38)


现在再说另外一个问题：是你设38的话，长600，宽360总有半格出现。格子不完整
最好总数为59，加一条线就刚好60，这样格子都完整。

不然你先用二楼代码试一下，更容易计算。

花简静

柒玥 发表于 2024-8-2 13:51 我的天呢，静静我还是弄不懂，这可咋整

<style> .box3 { position: relative; width: 600px; height: 360px; left: calc(50% - 300px); border-color: green; border-style: solid; border-width: 1px 0 0 1px; background: repeating-linear-gradient(transparent 29px, green 29px 30px, transparent 0 59px), repeating-linear-gradient(90deg,transparent 29px, green 29px 30px, transparent 0 59px); } </style> <div class="box3"></div></div>

花简静

给柒玥参照一下

凡哥

花简静 发表于 2024-8-2 20:30
这是个有灵性的咖啡，肚子里说啥都能知道

咖啡虫

花简静

凡哥 发表于 2024-8-3 07:48
咖啡虫

啊，下回喝咖啡得看看再下口