文本阴影（text-shadow）异用

马黑黑

天高幾許問真龍

请尝试选择上面方框中的文本。

是否发现无法选择呢？为什么这些文本无法选择呢？看看代码，可能可以理解：

<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>

父元素，id="mydiv" 的 div，没有禁止文本选择，仅将溢出的内容隐藏起来。装载文本的元素，id="txtbox" 的 div，自身通过 transform: translate(0, -80px) 上移 80 个像素，溢出了父元素，被隐藏起来、不可见，但它有一个文本阴影设置，定义了两个阴影，第一个阴影垂直下放到 80px 处，阴影所在的位置正是元素原本的位置；第二个阴影起修饰作用，令第一个阴影显示出来的“文本”阴影化（立体化）。

附：text-shadow 属性语法

text-shadow: 阴影水平位置 阴影垂直位置 阴影模糊半径 阴影颜色

马黑黑

text-shadow，CSS 2.0 就开始拥有，CSS2.1 一度取消该属性，到 CSS 3.0 又重新引入且做了一些发展。这是一个很实用的文本修饰属性，一般用来立体化文本，也可以通过它制作文本特效。

马黑黑

关于 text-shadow 的模糊半径：

默认值为 0 ，即不模糊，若使用此值，则阴影和原始文本是一样的呈现方式。模糊半径值设为 0 时，可以不要单位，设为非 0 时必须有单位（例如 4px 而不能是 4）。支持负值，但我没能试出负值的效果。

庶民

增强文字效果。

马黑黑

庶民 发表于 2023-3-4 08:34
增强文字效果。

文本阴影的作用是如此

红影

也就是说，呈现在框里的只是这个文字的阴影，不是文字本身，所以无法涂黑，是这样吧？

红影

我在本地试了一下，去掉transform: translate(0, -80px);，果然看到两行文字，上面的能选，下面的不能选

红影

加上transform: translate(0, -80px);后，原来的文字跑哪去了？我去掉overflow: hidden;仍然看不到啊？

红影

阴影还有这么奇特的用法，学习了

马黑黑

红影 发表于 2023-3-4 09:13
也就是说，呈现在框里的只是这个文字的阴影，不是文字本身，所以无法涂黑，是这样吧？

马黑黑

红影 发表于 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
阴影还有这么奇特的用法，学习了

这是异用

樵歌

那行字像定海神针一样纹丝不动。

马黑黑

樵歌 发表于 2023-3-4 10:51
那行字像定海神针一样纹丝不动。

起个网名好难

学习

马黑黑

起个网名好难 发表于 2023-3-4 11:13
学习

小辣椒

这样的立体感很强，视觉有冲击力，效果美美的

马黑黑

小辣椒 发表于 2023-3-4 12:06
这样的立体感很强，视觉有冲击力，效果美美的

还不错

红影

马黑黑 发表于 2023-3-4 09:18

知道了，谢谢黑黑