红影 发表于 2024-8-3 16:40
当阴影取的尺寸超出元素尺寸，可以脱离元素，成为独立的样子。这个还好理解。
那个月牙挺难理解，不取bord ...
对月牙的理解，你可以单独做一个测试：给元素自身着色。
马黑黑 发表于 2024-8-3 19:44
100√
谢谢，开心答对了{:4_173:}
红影 发表于 2024-8-3 19:48
谢谢，开心答对了
这是一般的作业，跟进教程的应该都可以做出来
马黑黑 发表于 2024-8-3 19:46
对月牙的理解，你可以单独做一个测试：给元素自身着色。
我就是单独测试的啊。
刚才又去试了一下，把那50%分别取10 20 之类的，好像有点感受了。然后左和下的取值不一样，月亮的胖瘦也不一样。
马黑黑 发表于 2024-8-3 19:50
这是一般的作业，跟进教程的应该都可以做出来
是的，这里的作业都不难。{:4_204:}
马黑黑 发表于 2024-8-3 19:45
我来帮老师加一楼{:4_173:}
南无月 发表于 2024-8-3 21:00
我来帮老师加一楼
谢谢
红影 发表于 2024-8-3 19:55
我就是单独测试的啊。
刚才又去试了一下，把那50%分别取10 20 之类的，好像有点感受了。然后左和下的取 ...
你最好还是给宿主元素加色，这样就更清晰
红影 发表于 2024-8-3 19:55
是的，这里的作业都不难。
搁在两年前，那是难上加难
<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">第十五讲：文本阴影和使用元素背景渲染文本</h2>
<p>音画帖离不开对文本的处理。关于文本的CSS知识我们不打算做全面的介绍，用到时会略作解释。本讲讲讲文本阴影和使用元素背景渲染文本，先从文本阴影开始。文本阴影有专属的CSS属性，<span class="textRed">text-shadow</span>，和刚介绍的元素阴影 <span class="textRed">box-shadow</span> 有很多相近之处。来看看经典的文本阴影设置：</p>
<div class="hE"><pre id="pre1">
<style>
/* 给元素设置文本相关等属性 */
.tbox1 {
padding: 6px; /* 元素的内边距 ：令盒子里面的内容与边缘拉开距离 */
font: bold 2em/2.4em sans-serif; /* 文本语法糖设置 ：粗细 + 尺寸/行间距 + 字体 */
color: plum; /* 文本颜色即前景色 */
text-shadow: 2px 2px 4px #000; /*文本阴影属性 ：X偏移量 + Y偏移量 + 模糊半径 + 颜色 */
border: 1px solid gray; /* 边框用于观察 */
}
</style>
<div class="tbox1">
Hello World! 你好世界！
</div>
</pre></div>
<p><button id="btn1" type="button" value="1">点击查看效果</button></p>
<div id="sbox1" class="showDiv"></div>
<p><span class="textRed">text-shadow</span> 用来设置文本阴影，XY偏移量支持正负数，原理与 <span class="textRed">box-shadow</span> 的一致。当文本阴影如果仅用于立体化文本时，不宜用过大的偏移量，模糊半径也一样，而阴影颜色理论上应有别于前景色但也不一定；有时我们会将阴影偏移量设计的比较大，比如营造文本投影效果：</p>
<div class="hE"><pre id="pre2">
<style>
.tbox2 {
padding: 6px;
font: bold 2em/2.4em sans-serif;
color: black;
text-shadow: -6px -35px 4px silver; /* 投影效果的文本阴影设置 */
}
</style>
<div class="tbox2">
Hello World! 你好世界！
</div>
</pre></div>
<p><button id="btn2" type="button" value="2">点击查看效果</button></p>
<div id="sbox2" class="showDiv"></div>
<p>和盒子阴影一样，文本阴影同样支持多重阴影，各组阴影代码语句之间也是用逗号隔开。多重文本阴影可以渲染出丰富的文本效果，试看如下简单的多重文本阴影示例：</p>
<div class="hE"><pre id="pre3">
<style>
.tbox3 {
padding: 6px;
font: bold 2em/2.4em sans-serif;
color: white;
text-shadow:
-1px -1px 2px tan,
1px 1px 2px gray,
2px 2px 3px red,
3px 3px 4px green;
}
</style>
<div class="tbox3">
Hello World! 你好世界！
</div>
</pre></div>
<p><button id="btn3" type="button" value="3">点击查看效果</button></p>
<div id="sbox3" class="showDiv"></div>
<p>和box-shadow属性一样，text-shadow属性多重阴影不会将前面的阴影当做克隆对象。但可以考虑给有文本内容的元素使用drop-shadow子滤镜来实现阴影克隆阴影的效果。</p>
<p>下面讲讲使用元素的背景图像来渲染文本，这需要给元素添加一个 <span class="textRed">background-clip</span> 属性，这是背景剪裁属性，当其值为 <span class="textRed">text</span> 时，元素的背景仅呈现在文本的笔画上。当然，还需要文本的颜色应是透明的，试看如下例子，我们给元素设置的背景图片只对文本进行渲染，元素的其他地方看不到背景图片的身影：</p>
<div class="hE"><pre id="pre4">
<style>
.tbox4 {
padding: 6px;
font: bold 3em sans-serif;
color: transparent; /* 前景色设置为透明 */
background: url('https://638183.freep.cn/638183/t22/gif/121.gif') repeat;
background-clip: text; /* 将背景图像剪裁按文本剪裁 */
--webkit-background-clip: text; /* 兼容chromium内核 ＜ 120 */
/* 若需要文本阴影应使用 filter 实现，因为 text-shadow 会入侵透明的前景色 */
filter: drop-shadow(2px 2px 2px #666);
}
</style>
<div class="tbox4">
Hello World! 你好世界！
</div>
</pre></div>
<p><button id="btn4" type="button" value="4">点击查看效果</button></p>
<div id="sbox4" class="showDiv"></div>
<p>上例闪烁的效果是GIF动图营造出来的。实际应用场景中，我们也可以为文本设计出动态的效果，例如花潮格式的lrc歌词同步插件有一些就是利用渐变背景与元素或元素背景的尺寸的动态变化来实现的。以下文本颜色渐变动态效果利用background-position 属性即背景位置的CSS关键帧动画加以实现：</p>
<div class="hE"><pre id="pre5">
<style>
.tbox5 {
padding: 6px;
width: fit-content; /* 元素宽度随子内容而定 */
height: fit-content; /* 元素高度度随子内容而定 */
font: bold 3em sans-serif;
color: transparent;
background: linear-gradient(to right, cyan, teal, orange, teal, cyan) no-repeat0/200% 100%;
background-clip: text;
--webkit-background-clip: text;
filter: drop-shadow(2px 2px 2px #666);
animation: bgmove 3s linear infinite alternate;
}
@keyframes bgmove { to { background-position: 100% 0; } }
</style>
<div class="tbox5">
Hello World! 你好世界！
</div>
</pre></div>
<p><button id="btn5" type="button" value="5">点击查看效果</button></p>
<div id="sbox5" class="showDiv"></div>
<p>本讲主要学习文本阴影 text-shadow 和使用元素背景图像渲染文本 background-clip 两个文本修饰属性，用好它们可以给文本添色、营造炫酷的文本特效。本讲作业相对简单：请使用静图或动图做元素的背景，令背景图像仅渲染在文本上，并让文本投射在偏右一点点的后方。</p>
<p><a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=77307&extra=page%3D1">返回目录</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-8-3 22:42
你最好还是给宿主元素加色，这样就更清晰
是的，这注意不错，可以看得更清晰了{:4_187:}
马黑黑 发表于 2024-8-3 22:42
搁在两年前，那是难上加难
是的，之前玩论坛只喜欢文字内容，音画几乎不涉足，现在也可以做点帖子了，说明黑黑的教学是卓有成效的{:4_199:}
马黑黑 发表于 2024-8-4 08:28
.artbox { position: relative; }
.artbox > p { position: relative; margin: 10px 0; font: normal 18 ...
这里的文本都好美啊，想起文字仓库了。
被渲染过的文本，拥有了别样的魅力{:4_199:}
红影 发表于 2024-8-4 10:38
这里的文本都好美啊，想起文字仓库了。
被渲染过的文本，拥有了别样的魅力
这叫添色
红影 发表于 2024-8-4 10:29
是的，之前玩论坛只喜欢文字内容，音画几乎不涉足，现在也可以做点帖子了，说明黑黑的教学是卓有成效的{: ...
你确定没有误人子弟？
小文 发表于 2024-8-4 08:31
这个贴子太好了，喜欢。先收藏，慢慢学习
上午好
红影 发表于 2024-8-4 09:48
是的，这注意不错，可以看得更清晰了
有明确参照
<style>
.hyhy {
padding: 6px;
font: bold 3em sans-serif;
color: transparent; /* 前景色设置为透明 */
background: url('https://pic.imgdb.cn/item/66aefb63d9c307b7e904bd95.gif') repeat;
background-clip: text; /* 将背景图像剪裁按文本剪裁 */
--webkit-background-clip: text; /* 兼容chromium内核 ＜ 120 */
/* 若需要文本阴影应使用 filter 实现，因为 text-shadow 会入侵透明的前景色 */
filter: drop-shadow(2px 0px 1px red);
}
</style>
<div class="hyhy">
感谢黑黑的精彩教程！
</div>
选的动图貌似有些太快了{:4_173:}