text-decoration 文本装饰线
text-decoration 属性是 text-decoration-line、text-decoration-style、text-decoration-color 和 text-decoration-thickness 的缩写
<p style="text-decoration: overline">上划线</p>
<p style="text-decoration: line-through">删除线</p>
<p style="text-decoration: underline">下划线</p>
当父元素和子元素同时设置 text-decoration 效果的时候，文字的装饰线效果是累加的，而不是覆盖的，效果见链接https://demo.cssworld.cn/new/3/8-1.php
text-decoration-line 装饰线的类型
/* 没有装饰线 */
text-decoration-line: none;
/* 下划线装饰 */
text-decoration-line: underline;
/* 上划线装饰 */
text-decoration-line: overline;
/* 贯穿线装饰 */
text-decoration-line: line-through;
/* 支持同时设置多个属性——如上划线装饰和下划线装饰同时出现 */
text-decoration-line: underline overline;text-decoration-style 装饰线的风格
/* 实线 */
text-decoration-style: solid;
/* 双实线 */
text-decoration-style: double;
/* 点线 */
text-decoration-style: dotted;
/* 虚线 */
text-decoration-style: dashed;
/* 波浪线 */
text-decoration-style: wavy;text-decoration-color 装饰线的颜色
text-decoration-thickness 装饰线的粗细
由于text-decoration-thickness属性是在CSS4中加入，因此兼容性差一些，建议分开设置
text-decoration: wavy underline red;
text-decoration-thickness: 3px;【实战】下划线粘连的解决方案
方案1：text-underline-offset
text-underline-offset 属性可以用来设置下划线的位置，其偏移量支持数值和百分比值，支持负值（下划线会向上偏移）
<template>
<p class="offset" style="text-decoration: underline">下划线</p>
</template>
<style scoped>
.offset {
text-underline-offset: 1em;
}
</style>方案2：text-underline-position: under
缺陷：下划线偏移的位置是固定的
<template>
<p class="offset" style="text-decoration: underline">下划线</p>
</template>
<style scoped>
.offset {
text-underline-position: under;
}
</style>方案3：改用 border-bottom 实现下划线
<template>
<span class="underlineDemo">下划线</span>
</template>
<style scoped>
.underlineDemo {
border-bottom: 1px solid;
}
</style>【实战】波浪线
<template>
<wavy></wavy>
</template>
<style scoped>
wavy {
display: block;
height: 0.5em;
white-space: nowrap;
letter-spacing: 100vw;
padding-top: 0.5em;
overflow: hidden;
}
wavy::before {
content: '\2000\2000';
/* IE浏览器用实线代替*/
text-decoration: overline;
/* 现代浏览器，Safari浏览器不支持text-decoration：overline wavy缩写*/
text-decoration-style: wavy;
}
</style>文字描边 stroke
文本外描边 paint-order
-
normal是默认值，表示绘制顺序是fill、stroke、markers，即先执行填充，再执行描边，最后执行标记。 -
fill表示先执行填充。 -
stroke表示先执行描边，再执行填充或者标记。之所以paint-order:stroke可以实现外描边效果，实际上是因为内侧的描边被填充覆盖了。 -
markers表示先执行标记。
<svg>
<text x="5" y="120" class="paint-order">感谢您的正版支持</text>
</svg>svg {
background-color: deepskyblue;
fill: crimson;
stroke: white;
stroke-width: 6px;
font-size: 36px;
}
.paint-order {
paint-order: stroke;
}文本强调字符装饰 text-emphasis
文本阴影 text-shadow
text-shadow 可以设置多个阴影，每个阴影之间使用逗号隔开
- 不支持inset关键字，即只有外阴影，没有内阴影。
- 不支持阴影扩展，最多支持3个数值，分别表示水平偏移、垂直偏移和模糊大小
- 支持任意数量的阴影叠加
值 | 描述 |
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊的距离。 |
color | 可选。阴影的颜色（默认值为color的颜色值）。参阅 CSS 颜色值 |
<span style=" color: white;text-shadow: 2px 2px 4px #000000;">白色文本的阴影效果！</span>
模糊阴影
<span style="text-shadow: 2px 2px 8px #ff0000;">模糊的阴影效果</span>
凹陷文字
<div style="text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff; color: #666;">凹陷文字</div>
突出文字
<div style="text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;">突出文字</div>
