时间戳

首页 > 解决方案 > 有什么方法可以为css中的文本下划线增加权重？

css - 有什么方法可以为css中的文本下划线增加权重？

问题描述

我有这段代码，我想为我的弯曲文本下划线增加重量，因为它太薄而实际上没有明显的影响。我读过关于使用border-bottom 来增加重量，但是我不能让它弯曲。有没有人对如何解决这个问题有任何想法？

.underline-yellow{
  text-decoration: underline;
  text-decoration-color: #FFBE00;
  text-decoration-style: wavy;
  padding-bottom:2px;
  color: black;
}

标签： csstext-decorations

解决方案

如果不更改字体属性，就无法设置文本下划线粗细。

您可以玩弄background-image并制作一种波浪形的样式。

body {
  background: #ccc;
}
.underline-yellow{
  color: black;
    background-image: linear-gradient(45deg, transparent 65%, yellow 80%, transparent 90%), linear-gradient(135deg, transparent 5%, yellow 15%, transparent 25%), linear-gradient(135deg, transparent 45%, yellow 55%, transparent 65%), linear-gradient(45deg, transparent 25%, yellow 35%, transparent 50%);
    background-repeat: repeat-x;
    background-size: 20px 5px;
    background-position: 0 100%;
    padding-bottom: 3px;
 }
<span class="underline-yellow">My decorated text</span>

推荐阅读