马黑黑 发表于 2024-7-30 22:00
钢铁侠呀俺
比钢铁侠还厉害
<style>
#hy {
width: 400px;
height: 200px;
border: 10px ridge LightGreen;
border-radius: 0 30px;
}
</style>
<div id="hy"></div>
请检查作业。名字我换了，不会干扰了吧{:4_173:}
小辣椒 发表于 2024-7-30 22:01
比钢铁侠还厉害
{:4_203:}
红影 发表于 2024-7-30 22:01
请检查作业。名字我换了，不会干扰了吧
换了就不会
马黑黑 发表于 2024-7-30 22:02
换了就不会
是怕同一个页面里有干扰，赶紧换了一下。用了红影首字母，这个通常不会被用到{:4_173:}
马黑黑 发表于 2024-7-30 22:01
100√
呀，100分啊，开心{:4_205:}
红影 发表于 2024-7-30 22:07
呀，100分啊，开心
{:4_172:}
红影 发表于 2024-7-30 22:06
是怕同一个页面里有干扰，赶紧换了一下。用了红影首字母，这个通常不会被用到
如此甚好
马黑黑 发表于 2024-7-30 22:37
笑得这么嗨{:4_196:}
马黑黑 发表于 2024-7-30 22:37
如此甚好
这个已经是翻页过的，赶快发新教程啊{:4_173:}
马黑黑 发表于 2024-7-29 13:41
看到代码有点晕，学不会啊{:5_117:}
<style>
.artbox { position: relative; }
.artbox > p { position: relative; margin: 10px 0; font: normal 18px / 26px sans-serif; }
.artbox mark { color: black; background: lightblue; padding: 2px 4px; }
.textRed { color: red; }
.showDiv { position: relative; }
</style>
<div class="artbox">
<h2 class="textMid">第十一讲：CSS渐变之线性渐变</h2>
<p>CSS渐变被广泛应用于元素的背景、边框，CSS的遮罩技术也可以使用渐变来实现。CSS渐变本质上是一系列CSS函数，函数名称通常是 <span class="textRed">*-gradient()</span> 这样的构成，共三种类型，本讲讲第一种，线性渐变函数，<span class="textRed">linear-gradient()</span>。</p>
<p>所有的渐变至少需要两种颜色参与。两种或更多的颜色参与渐变时，颜色与颜色之间会以特定方式逐渐过渡。以下示例，.box1 类选择器使用了线性渐变做元素的背景图像，参与渐变的颜色三种，红绿蓝：</p>
<div class="hE"><pre id="pre1">
<style>
.box1 {
width: 400px;
height: 260px;
background: linear-gradient(red, green, blue);
}
</style>
<div class="box1"></div>
</pre></div>
<p><button id="btn1" type="button" value="1">点击查看效果</button></p>
<div id="sbox1" class="showDiv"></div>
<p>效果是自上而下渐变，每一种颜色都有明显的横向线状的颜色块，故而称这种渐变方式为线性渐变。这是渐变角度设置缺省即没有设置渐变角度时的效果，默认为 <span class="textRed">to bottom</span>自上而下，即第一个出现的颜色在上边，最后一个颜色在下边， 或 0deg 即0度。角度的可选关键字值还有 <span class="textRed">to top</span>（自下而上）、 <span class="textRed">to right</span>（自左而右）、<span class="textRed">to left</span>(自右向左)，还有一系列的 <span class="textRed">to top right</span>（自左下向右上）组合法，组合的单词不讲究顺序但需要合法、能够实现。也可以使用<span class="textRed">角度值</span>，如 45deg 表示45度。至于用关键字表达法还是角度值表达法视需求而定，例如有时我们希望以对角线为渐变分界，那么使用 to top bottom 这类表达法非常省事。代码举例如下，注意角度放在前面，也是用逗号与其他表达字符隔开：</p>
<div class="hE"><pre>
background: linear-gradient(to left, red, green, blue); /* 自右向左 */
background: linear-gradient(to bottom left, red, green, blue); /* 自右上到左下 */
background: linear-gradient(135deg, red, green, blue); /* 135度 */
</pre></div>
<p>一些场合下我们想使用多种颜色填充背景却不想要渐变功能，这就涉及到颜色分界问题，术语叫色标，即颜色的起、始标记。以向右渐变为例，我们来看看棕褐色（tan）、青色（teal）和橄榄色（olive）各以 33.3% 占比共同铺满元素且颜色分界明晰的代码和效果：</p>
<div class="hE"><pre id="pre2">
<style>
.box2 {
width: 400px;
height: 100px;
background: linear-gradient(90deg, tan 33.3%, teal 33.3% 66.6%, olive 0);
}
</style>
<div class="box2">
</pre></div>
<p><button id="btn2" type="button" value="2">点击查看效果</button></p>
<div id="sbox2" class="showDiv"></div>
<p>90deg 等于 to right，自左向右布局颜色，tan 后面跟 33.3% 表示棕褐色在填充区域的占比，33.3% 也是棕褐色的颜色结束点；青色从棕褐色的结束点 33.3% 开始自己的渐变参与，在 66.6% 处结束自己的颜色；olive 后面跟一个 0 是偷懒的做法，表示它的渐变起点和它前面的颜色的百分比一样（66.6%），且余下的区域都是它的。其实每一个参与渐变的颜色都可以像 teal 的设置一样标出颜色始和颜色止两组占比数据，但通常只有中间部分的颜色需要这么做，头尾的尽量简化表达方式。</p>
<p>CSS渐变的结果被视为图像，做元素背景使用时，它就可以和图像一样可以设置 background-position（背景图像位置）和 background-size（背景图像大小），大家日后可以自行尝试，会有很多意外发现。而重复性线性渐变，<span class="textRed">repeating-linear-gradient</span>，能极好地实现设置了小尺寸背景+repeat的效果。试看如下的百叶窗效果：</p>
<div class="hE"><pre id="pre3">
<style>
.box3 {
width: 400px;
height: 300px;
background: repeating-linear-gradient(transparent 2px, green 2px 10px, transparent 0 12px);
}
</style>
<div class="box3">
</pre></div>
<p><button id="btn3" type="button" value="3">点击查看效果</button></p>
<div id="sbox3" class="showDiv"></div>
<p>重复性线性渐变的技巧之一也是最重要的技巧是最后一个颜色的终止边界值即为该渐变单元的尺寸，12px意味着所有的渐变单元尺寸都是12个像素，然后重复铺开；技巧之二是它和 linear-gradient 一样，颜色之间也可以做硬边即硬过渡以追求所需效果。</p>
<p>CSS背景支持多图背景，渐变既然被视为图像，也就可以使用多组渐变来构造预设的图案。图案重叠会出现后面的覆盖前面的现象，我们可以借助透明色、背景融合等技术进行处理，让多组背景彼此交融。下面的例子，我们使用透明色 transparent 和实体颜色做两组重复性线性渐变背景，并让它们对角线交叉，构建出奇妙的图案：</p>
<div class="hE"><pre id="pre4">
<style>
.box4 {
width: 400px;
height: 300px;
background:
repeating-linear-gradient(to top right, transparent, green, transparent 8%),
repeating-linear-gradient(to top left, transparent, green, transparent 8%);
}
</style>
<div class="box4">
</pre></div>
<p><button id="btn4" type="button" value="4">点击查看效果</button></p>
<div id="sbox4" class="showDiv"></div>
<p>本讲介绍的线性渐变是非常基础的，所提到的渐变技巧和所揭示的渐变效果可能连冰山的一角都不到，但已足以令人惊叹。有兴趣有余力的童鞋可以网补更多的CSS线性渐变知识与技巧。</p>
<p>作业：制作一个方格稿纸元素，尺寸 600 * 360，方格大小自定。提示：① 参照百叶窗示例制作两组重复性渐变令其纵横交叉；② 如果效果存在边缘不能封口，可考虑使用 border 边框进行弥补，若此，注意保持边框尺寸与方格线相一致。</p>
<p><a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=77307&extra=&page=1">返回目录</a></p>
</div>
<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
var runCodes = (str,ele) => {
let reg = /(<script(.*?)>)(.|\n)*?(<\/script>)/g;
let js_str, html_str;
if(str.match(reg) !== null) {
js_str = str.match(reg);
html_str = str.replace(js_str, '').trim();
js_str = js_str.replace(/<[\/]{0,1}script[^>]*>/g,'').trim();
} else {
js_str = '';
html_str = str.trim();
}
ele.innerHTML = html_str;
let myfunc = new Function(js_str);
myfunc();
};
.forEach((btn,key) => {
var pres = , outs = ;
btn.onclick = () => {
runCodes(pres.innerText, outs);
btn.disabled = true;
}
});
</script>
红影 发表于 2024-7-31 00:01
这个已经是翻页过的，赶快发新教程啊
催更了
红影 发表于 2024-7-31 00:00
笑得这么嗨
为了健康长寿
竹溪 发表于 2024-7-31 07:53
看到代码有点晕，学不会啊
从头到尾细心过一两遍
马黑黑 发表于 2024-7-31 14:30
.artbox { position: relative; }
.artbox > p { position: relative; margin: 10px 0; font: normal 18 ...
这个我全部点开看了，太神奇了，就凭代码那一堆各种字母数字，就能整出图来了{:5_117:}
马黑黑 发表于 2024-7-31 14:37
从头到尾细心过一两遍
每个都点开来感觉最好，看这个看得晕，一点不懂。
竹溪 发表于 2024-7-31 20:08
每个都点开来感觉最好，看这个看得晕，一点不懂。
每一句代码都有各自的意思，它描述指定的东东是什么样子的，然后运行了就是什么样子的
马黑黑 发表于 2024-7-31 20:13
每一句代码都有各自的意思，它描述指定的东东是什么样子的，然后运行了就是什么样子的
知道了，我去好好学一下。
马黑黑 发表于 2024-7-31 14:30
.artbox { position: relative; }
.artbox > p { position: relative; margin: 10px 0; font: normal 18 ...
这个将了线性渐变，我已经知道下面两讲是什么标题了，虽然内容还不知道{:4_173:}