html - 如何添加上半部分仅填充颜色和下半部分仅文本笔划的文本样式？

Question

我想要实现的目标显示在以下屏幕截图中：

标题的底部有一个文本笔划，侧面和上部有一个（文本）颜色。我目前通过在一个容器中创建两个 div 来将它们“缝合”在一起来实现这一点。但是有没有一种更简洁的方法来实现这一点，而不是编写两个具有相同内容的 div？

我的代码：

.about_title-top {
  width: 100%;
  position: absolute;
  text-align: center;
}

.about_title-top_upper {
  position: absolute;
  top: 0;
  /*transform: translateY(50%);*/
}

.about_title-top_lower {
  position: absolute;
  top: 0;
  -webkit-clip-path: inset(44.5% 10% 0 10.25%);
  clip-path: inset(50% 20% 0 20%);
}

.text-border{
  -webkit-text-stroke-width: 1px;
  -webkit-text-fill-color: transparent;
    -webkit-text-stroke-color: red;
    -webkit-filter: drop-shadow(0px 0px 2px red);
    filter: drop-shadow(0px 0px 2px red);
}

<div class="about_title-top">
  <h3 class="about_title-top_upper">Utrecht based interactive designer & front-end developer</h3>
  <h3 class="about_title-top_lower text-border">Utrecht based interactive designer & front-end developer</h3>
</div>

标签： htmlcss

Answer 1

这是一个使用剪辑路径的想法，您需要在其中复制文本但不在 HTML 代码中：

.box {
  font-weight: 900;
  font-size: 70px;
  text-align: center;
  font-family: sans-serif;
  position:relative;
}

.box:before {
  content: attr(data-text);
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-color: red;
  -webkit-filter: drop-shadow(0px 0px 2px red);
  filter: drop-shadow(0px 0px 2px red);
}
.box:after {
  content: attr(data-text);
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  color:#fff;
  background:#000;
  clip-path:polygon(0 0,100% 0,100% 100%,80% 100%,80% 40%,20% 40%,20% 100%,0 100%);
  filter: drop-shadow(0px 0px 2px #fff);
}

<div class="box" data-text="Utrecht based interactive designer & front-end developer"></div>