CSS【详解】文本装饰（含文本装饰线 text-decoration ，文字描边 stroke，文本外描边 paint-order，文本强调字符装饰，文本阴影 text-shadow））...

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>

• 1.
• 2.
• 3.

当父元素和子元素同时设置 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;

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

text-decoration-style 装饰线的风格

登录后复制

/* 实线 */
    text-decoration-style: solid;
    /* 双实线 */
    text-decoration-style: double;
    /* 点线 */
    text-decoration-style: dotted;
    /* 虚线 */
    text-decoration-style: dashed;
    /* 波浪线 */
    text-decoration-style: wavy;

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

text-decoration-color 装饰线的颜色

text-decoration-thickness 装饰线的粗细

由于text-decoration-thickness属性是在CSS4中加入，因此兼容性差一些，建议分开设置

登录后复制

text-decoration: wavy underline red;
text-decoration-thickness: 3px;

• 1.
• 2.

【实战】下划线粘连的解决方案

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

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.

方案2：text-underline-position: under

缺陷：下划线偏移的位置是固定的

登录后复制

<template>
  <p class="offset" style="text-decoration: underline">下划线</p>
</template>

<style scoped>
.offset {
  text-underline-position: under;
}
</style>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.

方案3：改用 border-bottom 实现下划线

登录后复制

<template>
  <span class="underlineDemo">下划线</span>
</template>

<style scoped>
.underlineDemo {
  border-bottom: 1px solid;
}
</style>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.

【实战】波浪线

登录后复制

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

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.

文字描边 stroke

文本外描边 paint-order

• normal是默认值，表示绘制顺序是fill、stroke、markers，即先执行填充，再执行描边，最后执行标记。
• fill表示先执行填充。
• stroke表示先执行描边，再执行填充或者标记。之所以paint-order:stroke可以实现外描边效果，实际上是因为内侧的描边被填充覆盖了。
• markers表示先执行标记。

登录后复制

<svg>
    <text x="5" y="120" class="paint-order">感谢您的正版支持</text>
</svg>

• 1.
• 2.
• 3.

登录后复制

svg {
    background-color: deepskyblue;
    fill: crimson;
    stroke: white;
    stroke-width: 6px;
    font-size: 36px; 
}
.paint-order {
    paint-order: stroke;    
}

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

文本强调字符装饰 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>

• 1.

模糊阴影

登录后复制

<span style="text-shadow: 2px 2px 8px #ff0000;">模糊的阴影效果</span>

• 1.

凹陷文字

登录后复制

<div style="text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff; color: #666;">凹陷文字</div>

• 1.

突出文字

登录后复制

<div style="text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;">突出文字</div>

• 1.

原创作者: u_15715491 转载于: https://blog.51cto.com/u_15715491/11457409