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

花简静

凡哥教程第十一讲作业： 

制作一个方格稿纸元素，尺寸 600 * 360，方格大小自定。

提示：① 参照百叶窗示例制作两组重复性渐变令其纵横交叉；

② 如果效果存在边缘不能封口，可考虑使用 border 边框进行弥补，若此，注意保持边框尺寸与方格线相一致。

花简静

<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 14px, green 14px 15px, transparent 0 29px), repeating-linear-gradient(90deg,transparent 14px, green 14px 15px, transparent 0 29px); } </style>   <div class="box3"></div></div>

花简静

给方格纸定位，使其位置在中间
因边缘没有封口，根据老师提示，加了一个昨天学习的边框，令其封口
    border-color: green;（封口边框颜色）
    border-style: solid; （封口边框实线）
    border-width:  1px  0  0 1px;（封口边框上、右、下、左）

第一个渐变无方向设置，默认从上往下
第二个渐变加90deg，令其从左往右。

计算方法：transparent 14px, green 14px 15px, transparent 0 29px
transparent 14px, （透明14，）
green 14px 15px,（绿色从14开始 15结束，实际宽度1）
前两个合起来占位15
transparent 0（接下的距离全是透明的，其实它还要是14），

29px（29px意味着所有的渐变单元尺寸都是29个像素）

花简静

花简静

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

花简静

@凡哥 老师来瞧一下，交一份第十一讲的作业，多加了一个红蓝相间线条的格子

柒玥

花简静 发表于 2024-7-31 09:59
@凡哥 老师来瞧一下，交一份第十一讲的作业，多加了一个红蓝相间线条的格子 ...

我能说静静节奏可不可以放慢一些我快跟不上静静的脚步了

柒玥

欣赏静静的精美作业，抱抱静静辛苦啦抱完做作业去

柒玥

看似简单可是不会做

凡哥

花简静 发表于 2024-7-31 09:59
@凡哥 老师来瞧一下，交一份第十一讲的作业，多加了一个红蓝相间线条的格子 ...

好厉害的样纸

border和格子线粗细保持一致，可加入一句（值不一定是这样）：

border-width: 1px 0 0 1px;

就是说，边框线和边缘格子线若有重叠的，则设为0的厚度，需要封口的地方则设为1px