文本阴影
在 CSS3 之前, 除非使用图片, 否则无法给文本添加阴影效果现在, 使用 text-shadow 属性, 可以为文本添加一个或多个阴影及模糊效果语法格式为:
text-shadow: x-offset y-offset blur color;
各参数的含义见表表 3-5:
参数 | 含义 |
---|---|
x-offset | 必选参数,长度值,表示阴影在 x 轴的偏移量。可以是正值,也可以是负值。为正值时,阴影向右偏移,阴影在文本的右侧;为负值时,阴影向左偏移,阴影在文本的左侧 |
y-offset | 必选参数,长度值,表示阴影在 y 轴的偏移量。可以是负值,也可以是负值。为正值时,阴影向下偏移,阴影在文本的下方;为负值时,阴影向上偏移,阴影在文本的上方 |
blur | 可选参数,长度值,表示阴影的模糊距离,即阴影从开始变淡到完全消失的距离,不允许负值。值越大,阴影的边缘越模糊。如果不指定,则使用默认值 0,表示不具有模糊效果 |
color | 可选参数,表示阴影的颜色。如果不指定,则使用文本的颜色 |
不管是偏移, 还是模糊, 都不会改变元素本身的尺寸因此, 发生偏移模糊后, 阴影可能会超出元素本身, 延伸到元素的边界之外
除了单阴影外, 还可以使用逗号分隔的阴影列表, 为文本设置多重阴影效果通过多重阴影的叠加, 可以实现很多有趣的效果如, word 中的空心文字阳文阴文这些文本特效, 都可以通过多重阴影来实现
在文本的上下左右四个方向各添加 1px 的黑色阴影, 可以实现空心文字效果; 在文本的左上和右下各添加 1px 的错位补色阴影, 可以实现阳文文字效果; 把阳文的左上和右下的阴影颜色颠倒, 即可实现阴文文字效果 CSS 代码如下:
- .stroke {
- text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
- }
- .outset {
- text-shadow: -1px -1px #fff, 1px 1px #333;
- }
- .inset {
- text-shadow: 1px 1px #fff, -1px -1px #333;
- }
在网页中, 只需把这三种不同的阴影, 应用到特定的文本, 即可实现相应的文本特效 html 代码如下:
- <p class="stroke"> 空心文本 </p>
- <p class="outset"> 阳文文本 </p>
- <p class="inset"> 阴文文本 </p>
上述代码的运行效果如图 3-22 所示
图 3-22 text-shadow 属性效果
在指定文本阴影时, 阴影的颜色可以接受任意合法的 CSS 颜色值, 如预定义颜色名十六进制数值 RGB 值 RGB 百分比 RGBA 值 HSL 值 HSLA 值
需要注意的是, 浏览器必须同时支持 RGB 和 HSL 颜色模式, 及 text-shadow 属性, 才能渲染出阴影效果考虑到浏览器的兼容性, 一般会这样声明:
- text-shadow: 4px 4px #404442;
- text-shadow: 4px 4px hsl(140, 3%, 26%, 0.4);
也就是先定义一个使用十六进制颜色的阴影, 作为对老浏览器的备用颜色然后, 再为现代浏览器定义一个使用 RGBAHSL 和 HSLA 颜色的阴影
来源: https://www.2cto.com/kf/201802/721475.html