2019-07-31
描述
一种较好的可选方案为 text-decoration: underline
或 <u></u>
, 但是下行字母不能被下划线所裁剪。但可以使用 text-decoration-skip-ink: auto
来进行解决,然而只有少数字母不会超过下划线。
HTML
<p class="pretty-text-underline">Pretty text underline without clipping descending letters.</p>
CSS
body { background-color: #f5f6f9; } .pretty-text-underline { display: inline; text-shadow: 1px 1px #f5f6f9, -1px 1px #f5f6f9, -1px -1px #f5f6f9, 1px -1px #f5f6f9; background-image: linear-gradient(90deg, currentColor 100%, transparent 100%); background-position: bottom; background-repeat: no-repeat; background-size: 100% 1px; } .pretty-text-underline::-moz-selection { background-color: rgba(0, 150, 255, 0.3); text-shadow: none; } .pretty-text-underline::selection { background-color: rgba(0, 150, 255, 0.3); text-shadow: none; }
Demo
说明
text-shadow
使用带有 4 个偏移的设置来覆盖一个 4x4 的区域,以确保下行字母和下划线的相邻处有一个“浑厚”的阴影。
使用的颜色需要和背景色保持一致。对于大的字体,需要使用一个更大的px
尺寸。偏移值要使其能够创建一个均等的、浑厚的阴影,当然也可以使用子像素background-image: linear-gradient(...)
使用文本的颜色创建一个 90 度的渐变(currentColor
)background-*
属性设置需要使块的宽度为 100%、高度为 1px,背景位于底部且不能重复。这样就可以在文字下方创建一个 1px 的下划线::selection
伪选择器的设置可以保证文字在选中后不会被他的阴影所干扰
浏览器支持
支持率:97.5%
支持情况:
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于