文本阴影（text-shadow）异用
本帖最后由 马黑黑 于 2023-3-4 08:22 编辑 <br /><br /><style>#mydiv {
margin: auto;
padding: 0 8px;
width: fit-content;
height: fit-content;
border: 1px solid tan;
overflow: hidden;
}
#txtbox {
position: relative;
margin: 0;
padding: 0;
font: bold 60px sans-serif;
transform: translate(0, -80px);
text-shadow: 0 80px 0 #000, 2px 82px 4px gray;
}
</style>
<div id="mydiv">
<p id="txtbox">天高幾許問真龍</p>
</div>
<p><br>请尝试选择上面方框中的文本。</p>
<p><br>是否发现无法选择呢？为什么这些文本无法选择呢？看看代码，可能可以理解：</p><p><br></p><p><style></p><p>#mydiv {</p><p><span style="white-space:pre"> </span>margin: auto;</p><p><span style="white-space:pre"> </span>padding: 0 8px;</p><p><span style="white-space:pre"> </span>width: fit-content;</p><p><span style="white-space:pre"> </span>height: fit-content;</p><p><span style="white-space:pre"> </span>border: 1px solid tan;</p><p><span style="white-space:pre"> </span>overflow: hidden;</p><p>}</p><p>#txtbox {</p><p><span style="white-space:pre"> </span>position: relative;</p><p><span style="white-space:pre"> </span>margin: 0;</p><p><span style="white-space:pre"> </span>padding: 0;</p><p><span style="white-space:pre"> </span>font: bold 60px sans-serif;</p><p><span style="white-space:pre"> </span>transform: translate(0, -80px);</p><p><span style="white-space:pre"> </span>text-shadow: 0 80px 0 #000, 2px 82px 4px gray;</p><p>}</p><p></style></p><p><br></p><p><div id="mydiv"></p><p><span style="white-space:pre"> </span><p id="txtbox">天高幾許問真龍</p></p><p></div></p><p><br></p><p>父元素，id="mydiv" 的 div，没有禁止文本选择，仅将溢出的内容隐藏起来。装载文本的元素，id="txtbox" 的 div，自身通过 transform: translate(0, -80px) 上移 80 个像素，溢出了父元素，被隐藏起来、不可见，但它有一个文本阴影设置，定义了两个阴影，第一个阴影垂直下放到 80px 处，阴影所在的位置正是元素原本的位置；第二个阴影起修饰作用，令第一个阴影显示出来的“文本”阴影化（立体化）。</p><p><br></p><p>附：text-shadow 属性语法</p><p><br></p><p>text-shadow: 阴影水平位置 阴影垂直位置 阴影模糊半径 阴影颜色</p><p><br></p>
text-shadow，CSS 2.0 就开始拥有，CSS2.1 一度取消该属性，到 CSS 3.0 又重新引入且做了一些发展。这是一个很实用的文本修饰属性，一般用来立体化文本，也可以通过它制作文本特效。 本帖最后由 马黑黑 于 2023-3-4 08:23 编辑
关于 text-shadow 的模糊半径：
默认值为 0 ，即不模糊，若使用此值，则阴影和原始文本是一样的呈现方式。模糊半径值设为 0 时，可以不要单位，设为非 0 时必须有单位（例如 4px 而不能是 4）。支持负值，但我没能试出负值的效果。 增强文字效果。 庶民 发表于 2023-3-4 08:34
增强文字效果。
文本阴影的作用是如此 也就是说，呈现在框里的只是这个文字的阴影，不是文字本身，所以无法涂黑，是这样吧？ 我在本地试了一下，去掉transform: translate(0, -80px);，果然看到两行文字，上面的能选，下面的不能选{:4_173:} 加上transform: translate(0, -80px);后，原来的文字跑哪去了？我去掉overflow: hidden;仍然看不到啊？ 阴影还有这么奇特的用法，学习了{:4_187:} 红影 发表于 2023-3-4 09:13
也就是说，呈现在框里的只是这个文字的阴影，不是文字本身，所以无法涂黑，是这样吧？
{:4_181:} 红影 发表于 2023-3-4 09:14
我在本地试了一下，去掉transform: translate(0, -80px);，果然看到两行文字，上面的能选，下面的不能选{:4 ...
对的 红影 发表于 2023-3-4 09:15
加上transform: translate(0, -80px);后，原来的文字跑哪去了？我去掉overflow: hidden;仍然看不到啊？
跑到上方了。上方如果留有空间，就能看见，没有就看不见。你可以给父元素加入 margin-top: 100px; 看看 红影 发表于 2023-3-4 09:15
阴影还有这么奇特的用法，学习了
这是异用 那行字像定海神针一样纹丝不动。{:4_189:} 樵歌 发表于 2023-3-4 10:51
那行字像定海神针一样纹丝不动。
{:4_181:} 学习 起个网名好难 发表于 2023-3-4 11:13
学习
{:5_106:} 这样的立体感很强，视觉有冲击力，效果美美的 小辣椒 发表于 2023-3-4 12:06
这样的立体感很强，视觉有冲击力，效果美美的
还不错 马黑黑 发表于 2023-3-4 09:18
知道了，谢谢黑黑{:4_204:}