第十一讲作业
<style>
.box4 {
border: 1px solid green;
width: 600px;
height: 300px;
background:
repeating-linear-gradient(to top, transparent 0px, green 2px 3px, transparent 0 30px),
repeating-linear-gradient(to left, transparent 0px, green 2px 3px, transparent 0 30px);
}
</style>
<div class="box4">
折腾了老半天，本来以为把这段代码background: repeating-linear-gradient(transparent 2px, green 2px 10px, transparent 0 12px);里的green 2px 10px二个数字互换一下就成了结果出来的变成了不是硬过渡了这是为啥呢
绿叶清舟 发表于 2025-5-4 20:37
折腾了老半天，本来以为把这段代码background: repeating-linear-gradient(transparent 2px, green 2px 10p ...
硬过度，前面是多少，后面跟着是多少，你改 2px 10px 为 10px 2px，就和前面的 2px 相差了8个px，有缓冲渐变区了，就不是硬过度了
马黑黑 发表于 2025-5-4 20:41
硬过度，前面是多少，后面跟着是多少，你改 2px 10px 为 10px 2px，就和前面的 2px 相差了8个px，有缓冲 ...
现在明白了，本来以为这二个数字是绿和白的宽度了，可是我改成transparent 10px, green 10px 2px,就一线也看不到了
绿叶清舟 发表于 2025-5-4 21:30
现在明白了，本来以为这二个数字是绿和白的宽度了，可是我改成transparent 10px, green 10px 2px,就一线 ...
这是衔接的问题，前面的止于 2px, 后面的跟着是 2px 就是硬过度衔接，没有过度空间
<style>
.vid {
width: 600px;
height: 360px;
object-fit: cover; /* 视频内容适应元素尺寸 */
-webkit-mask: linear-gradient(30deg, red 90%, transparent 90%, transparent);
}
</style>
<video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1caa11c20fb.mp4" autoplay loop></video>
马黑黑 发表于 2025-5-4 21:33
这是衔接的问题，前面的止于 2px, 后面的跟着是 2px 就是硬过度衔接，没有过度空间
发现对这个位置感觉很差的了，每次都是改错了再重改才明白一些，可是到下一回又是再错
绿叶清舟 发表于 2025-5-5 10:38
发现对这个位置感觉很差的了，每次都是改错了再重改才明白一些，可是到下一回又是再错
边界意识。你是开放的{:4_170:}
马黑黑 发表于 2025-5-5 12:07
边界意识。你是开放的
开放不是在大力提倡的嘛
<style>
.cbox7 {
width: 300px;
height: 300px;
background: repeating-conic-gradient(orange , yellow , orange ,orange ,yellow ,orange,orange ,yellow ,yellow ,orange);
border-radius: 50%;
}
</style>
<div class="cbox7"></div>
border-radius: 50%;这个数字大于50的随便改啊，出来的都是园了
绿叶清舟 发表于 2025-5-5 20:28
border-radius: 50%;这个数字大于50的随便改啊，出来的都是园了
这要看情况的。你可以试试： border-radius: 50% 100%;
马黑黑 发表于 2025-5-5 20:59
这要看情况的。你可以试试： border-radius: 50% 100%;
变成一只蛋了
绿叶清舟 发表于 2025-5-6 20:54
变成一只蛋了
多尝试，多理解
马黑黑 发表于 2025-5-6 21:08
多尝试，多理解
做的时候好象理解了，用的时候又忘了
<style>
/* 帖子父容器id选择器 */
#mama {
position: relative;
margin: 20px auto;
width: 800px;
height: 450px;
background: url('https://638183.freep.cn/638183/t22/webp/jyiu.webp') no-repeat center/cover;
}
/* #mypic 选择器 */
#mypic {
position: absolute; /* 绝对定位 */
left: 20px; /* 左边位置*/
top: 10px; /* 上边位置 */
width: 120px; /* 宽度 */
height: 120px; /* 高度 */
/* animation简化语法 ：动画名称+运动周期时长+缓动形式+运行次数 */
animation: rot 4s linear 3;
}
/* 设计CSS关键帧动画 */
@keyframes rot {
from { transform: translateY(0px); } /* 从 0 度开始旋转 */
to { transform: translateY(330px); } /* 到 360 度即一圈完成一个旋转周期 */
}
</style>
<!-- HTML代码 ：父元素包裹一个子元素 -->
<div id="mama">
<img id="mypic" alt="" src="https://638183.freep.cn/638183/small/4yc.png" />
</div>
感觉今年都毕不了业了，看到后面又要回来重新再来了
绿叶清舟 发表于 2025-5-14 21:19
感觉今年都毕不了业了，看到后面又要回来重新再来了
记忆力不好了，多吃鱼，多喝驼奶