具有响应式文本的标题应在每行新行中具有背景-解网

问：

我正在寻找一位可以帮助我解决以下问题的 CSS Guru：

我正在开发一个响应式卡片容器（一行中显示的卡片数量取决于浏览器屏幕大小），其中包含包含标题的卡片组件。现在，我对我的主要部分标题进行了一定的设计，其设计如下：

在卡片组件中实现相同设计的问题在于，文本会对屏幕大小做出响应，并相应地使用多行。问题是，使用相同的编码技术，我有以下输出：

因此，我希望每条新线被响应缩放，就会有背景，中间有一些空间，而不是第二张图像中的块。因此，在上面的示例中，它就像是：“想进入”背景，“触摸”使用相同风格的单独背景。

现在，我在整个应用程序中使用以下类似的代码来执行此操作：

<div class="highlight-container">
  <span class="highlight">{{ section?.title?.key | translate | uppercase }}</span>
</div>

.highlight-container, .highlight, .subtitle, .subtitle-highlight {
  position: relative;
}

.highlight-container:before {
  content: " ";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  background: $accent-color;
  z-index: -1;
  left: -30px;
  border-radius: 4px;
  padding: 0px 0px 0px 50px;
  box-shadow: 7px 7px rgba(255, 126, 103, 0.4);
}

但是我想从头开始有一个解决方案，因为在这种情况下，标题位于我仍在设计的卡片组件中。

HTML CSS 背景高亮样式

h1 {
  --o: 7px; /* control the offset */

  max-width: 550px;
  font-size: 60px;
  font-weight: bold;
  font-family: sans-serif;
  text-align: center;
  margin: auto;
  color: #fff;
  text-shadow: 2px 2px #ab6053;
  
  /* the important code starts below */
  line-height: 1.3;
  padding-bottom: var(--o);
  background:
   conic-gradient(from 180deg at calc(100% - var(--o)) 40%,#ff7d67 25%,#0000 0)
    0 100%/100% 1.3em content-box,
   conic-gradient(from 90deg  at var(--o)              40%,#7b708a 25%,#0000 0)
    0 100%/100% 1.3em;
  clip-path: inset(var(--o) 0 0);
}


body {
  background: #0666a0;
}

<h1>Some text taking many lines</h1>

非常感谢您提供的解决方案！使用此解决方案，是否可以以任何方式添加边框半径？您能否更深入地解释一下代码中最重要的部分？它会帮助我学习一两件事，并将其放入我的CSS工具箱中。（不必立即，只要您有空闲时间，谢谢！

上一个：尝试在导航栏中突出显示当前页面

下一个：GitHub Actions：从“use”语句访问服务

具有响应式文本的标题应在每行新行中具有背景

Title that has responsive text should have a background per new line

评论

评论