text-shadow - 文本也要美美哒
本帖最后由 马黑黑 于 2022-1-30 10:11 编辑 <br /><br /><style>.sdBox { margin: auto; background:#fff; color: #000; padding: 10px; }
.sdBox p { margin: 8px 0; }
</style>
<div class="sdBox">
<p>HTML对文本有些规范，但没啥功能，对文本的修饰，主要还是由CSS来完成。其中，text-shadow能给文本添加阴影，用得好能让web页里的特定文本产生极佳的效果。</p>
<p>text-shadow语法：</p><p> text-shadow: h-shadow v-shadow blur color;</p><p>四个参数分别是：</p><p> ① h-shadow - 水平方向阴影位置（必须）<br> ② v-shadow - 垂直方向阴影位置（必须）<br> ③ blur - 模糊距离（可选）<br> ④ color - 阴影颜色（可选）</p><p>例：</p><p><h1 style="font-size: 40px; font-weight:bold; color: #fff; <font color="#ff0000">text-shadow:2px 2px 4px #000;</font>">新春快乐</h1></p><p>上例，水平和垂直阴影位置均为 2px，模糊距离是 4px，阴影颜色设置为黑色，效果如下:</p>
<h1 style="font-size: 40px; font-weight:bold; color: #fff; text-shadow:2px 2px 4px #000;">新春快乐</h1>
<p>请注意，即使我们设置了文本颜色和背景颜色一致，由于有了文本阴影，文本还是清晰可见。</p><p>阴影的位置，默认是向右下方向投射，若将水平和垂直阴影改为负值，情况如何？</p><p><h1 style="font-size: 40px; font-weight:bold; color: #fff; <font color="#ff0000">text-shadow:</font><font color="#006400">-2px -2px</font><font color="#ff0000"> 4px #000;</font>">新春快乐</h1></p>
<h1 style="font-size: 40px; font-weight:bold; color: #fff; text-shadow:-2px -2px 4px #000;">新春快乐</h1>
<p>可以看到，阴影投放的位置在左上。</p><p>阴影可以是多重的，多重阴影可以让文字得到更丰富细致的修饰，设计得法可以营造出很多效果来。看下面的立体字：</p><p><h1 style="font-size: 80px; font-weight:bold; color: #ff0000; <font color="#ff0000">text-shadow:<br></font></p><p><font color="#006400"> 0px 0px 0 #b89800,<br></font><span style="color: rgb(0, 100, 0);"> 1px -1px 0 #b39400,<br></span><span style="color: rgb(0, 100, 0);"> 2px -2px 0 #ad8f00,<br></span><span style="color: rgb(0, 100, 0);"> 3px -3px 0 #a88b00,<br></span><span style="color: rgb(0, 100, 0);"> 4px -4px 0 #a38700,<br></span><span style="color: rgb(0, 100, 0);"> 5px -5px 0 #9e8300,<br></span><span style="color: rgb(0, 100, 0);"> 6px -6px 6px rgba(0, 0, 0, 0.55),<br></span><font color="#006400"> 6px -6px 1px rgba(0, 0, 0, 0.5);</font>">虎虎生威虎变龙蒸</h1></p>
<h1 style="font-size: 80px; font-weight:bold; color: #ff0000;text-shadow:
0px 0px 0 #b89800,
1px -1px 0 #b39400,
2px -2px 0 #ad8f00,
3px -3px 0 #a88b00,
4px -4px 0 #a38700,
5px -5px 0 #9e8300,
6px -6px 6px rgba(0, 0, 0, 0.55),
6px -6px 1px rgba(0, 0, 0, 0.5);">虎虎生威虎变龙蒸</h1>
<p>看阴影部分的代码好像很复杂的样子，其实可以根据阴影各个参数的作用来理解这些阴影代码共同作用下为什么能得出酱紫的效果来。</p><p>最后再展示一下CSS描边字（也叫空心字），加深理解一下 模糊距离 参数的作用：</p><p><h1 style="font-size: 80px; font-weight:bold; color: #fff; <font color="#006400">text-shadow: 0px 0px 3px red;</font>">新春快乐</h1></p>
<h1 style="font-size: 80px; font-weight:bold; color: #fff; text-shadow: 0px 0px 3px #ff0000;">新春快乐</h1>
</div> 这个多重阴影倒是头一次看到，效果真美啊{:4_187:} 这个多重阴影的y向全是负值，怪不得显示出来全是斜上方。去看了这些颜色，都很接近呢，需要设置这么多么？最后两个才有模糊度，而且是半透明。这样的效果应该是多次测试的结果吧。
原来只要最后设置过模糊度，也不会让文字出现单纯重影，而是顺利延展。 最后那个空心也很巧妙，利用阴影色彩，让原本白色的字出现彩色描边，很有趣{:4_199:} 还是觉得那个多重阴影过于繁琐，有必要设置这么多相近颜色么，我甚至都看不出它们的差别{:4_173:} 虎怎么可能变龙
记得上次一个帖子古人以虫将动物分为四类：分别为 羽虫、毛虫、鳞虫、倮虫。当然最后那种特指人类。
老虎和龙分别属于毛虫和鳞虫，属于不同归属呢{:4_173:} 红影 发表于 2022-1-30 15:17
这个多重阴影倒是头一次看到，效果真美啊
配合背景、字体，效果会更好 红影 发表于 2022-1-30 15:23
这个多重阴影的y向全是负值，怪不得显示出来全是斜上方。去看了这些颜色，都很接近呢，需要设置这么多么？ ...
看出道道来了 红影 发表于 2022-1-30 15:34
虎怎么可能变龙
记得上次一个帖子古人以虫将动物分为四类：分别为 羽虫、毛虫、鳞虫、倮虫。当然最后那种 ...
虎变龙蒸是个成语 马黑黑 发表于 2022-1-30 16:23
配合背景、字体，效果会更好
现在就已经很美了{:4_187:} 马黑黑 发表于 2022-1-30 16:27
看出道道来了
设置得这么细致，肯定有道理。影子学习{:4_187:} 马黑黑 发表于 2022-1-30 16:30
虎变龙蒸是个成语
呀，对这个竟一点不知道呢。
虎变龙蒸，汉语成语，拼音hǔ biàn lóng zhēng，意思指乘时变化而飞黄腾达。出自《紫钗记·节镇还朝》。
学习了。 红影 发表于 2022-1-30 21:32
呀，对这个竟一点不知道呢。
虎变龙蒸，汉语成语，拼音hǔ biàn lóng zhēng，意思指乘时变化而飞黄腾 ...
瞧瞧，又涨知识了 红影 发表于 2022-1-30 21:31
现在就已经很美了
不行的，只是讲讲原理，美学意义没法展开 马黑黑 发表于 2022-1-30 22:12
瞧瞧，又涨知识了
这个成语有点偏僻，之前一点不知道。是的，又学了个新成语{:4_173:} 马黑黑 发表于 2022-1-30 22:12
不行的，只是讲讲原理，美学意义没法展开
是的，美这个字眼没有定论，看各人感受以及与背景的协调。 红影 发表于 2022-1-31 11:07
是的，美这个字眼没有定论，看各人感受以及与背景的协调。
是的 红影 发表于 2022-1-31 11:06
这个成语有点偏僻，之前一点不知道。是的，又学了个新成语
汉语词汇浩如烟海 马黑黑 发表于 2022-1-31 11:08
汉语词汇浩如烟海
深不可测{:4_173:} 红影 发表于 2022-1-31 16:02
深不可测
测测也无妨