查看: 1260|回复: 81

[活动] 【凡哥教程第十一讲作业】制作方格纸(CSS渐变之线性渐变)

[复制链接]
发表于 2024-7-31 09:30 | 显示全部楼层 |阅读模式
本帖最后由 花简静 于 2024-7-31 19:08 编辑

凡哥教程第十一讲作业: 
制作一个方格稿纸元素,尺寸 600 * 360,方格大小自定。
提示:① 参照百叶窗示例制作两组重复性渐变令其纵横交叉;
② 如果效果存在边缘不能封口,可考虑使用 border 边框进行弥补,若此,注意保持边框尺寸与方格线相一致。


评分

6

查看全部评分

点评
回复

使用道具

 楼主| 发表于 2024-7-31 09:32 | 显示全部楼层
本帖最后由 花简静 于 2024-7-31 19:10 编辑

<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>

评分

3

查看全部评分

点评
回复

使用道具

 楼主| 发表于 2024-7-31 09:49 | 显示全部楼层
本帖最后由 花简静 于 2024-7-31 19:12 编辑

给方格纸定位,使其位置在中间
因边缘没有封口,根据老师提示,加了一个昨天学习的边框,令其封口
    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个像素)

评分

4

查看全部评分

点评
回复

使用道具

 楼主| 发表于 2024-7-31 09:53 | 显示全部楼层
本帖最后由 花简静 于 2024-7-31 19:13 编辑

评分

3

查看全部评分

点评
回复

使用道具

 楼主| 发表于 2024-7-31 09:55 | 显示全部楼层
本帖最后由 花简静 于 2024-7-31 19:14 编辑

<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">

评分

2

查看全部评分

点评
回复

使用道具

 楼主| 发表于 2024-7-31 09:59 | 显示全部楼层
本帖最后由 花简静 于 2024-7-31 10:10 编辑

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

评分

2

查看全部评分

点评
回复

使用道具

发表于 2024-7-31 13:45 | 显示全部楼层
花简静 发表于 2024-7-31 09:59
@凡哥 老师来瞧一下,交一份第十一讲的作业,多加了一个红蓝相间线条的格子 ...

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

使用道具

发表于 2024-7-31 13:47 | 显示全部楼层
欣赏静静的精美作业,抱抱静静辛苦啦抱完做作业去
点评
回复

使用道具

发表于 2024-7-31 14:30 | 显示全部楼层
看似简单可是不会做
点评
回复

使用道具

发表于 2024-7-31 18:27 | 显示全部楼层
花简静 发表于 2024-7-31 09:59
@凡哥 老师来瞧一下,交一份第十一讲的作业,多加了一个红蓝相间线条的格子 ...

好厉害的样纸

border和格子线粗细保持一致,可加入一句(值不一定是这样):

border-width: 1px 0 0 1px;

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

评分

1

查看全部评分

点评
回复

使用道具

您需要登录后才可以回帖 登录 | 中文注册

本版积分规则

手机版|千山论坛 ( 冀ICP备2024055714号 )

GMT+8, 2025-6-9 20:02

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

快速回复 返回顶部 返回列表