是否可以为内联文本创建box-shadow效果？ [英] Is it possible to create box-shadow effect for inline text?

问题描述

我想创建此效果：

有没有办法通过CSS / JS？

Is there a way to do this via CSS/JS?

我是网页设计的新手，我在过去的几个小时里一直在努力工作。

Thanks so much I'm a newbie in web design and I've been struggling with this for the past hours!

推荐答案

这是基于在其他地方发现的box-shadow方法，但在Firefox 32的传统框中阴影解决方案不再正确呈现。

This is based on the box-shadow method found elsewhere however as of Firefox 32 the traditional box-shadow solution no longer renders correctly.

查看更改，我发现添加了一个新的属性：box-decoration-break，这是负责。此属性默认为split，但需要指定为clone才能实现所需的多行填充效果。

Reviewing the changes made I found the addition of a new property: box-decoration-break, that was responsible. This property defaults to 'split' but needs to be specified as 'clone' to achieve the desired multiline padding effect.

有关详细信息，请参阅：
https://developer.mozilla.org/en-US/docs / Web / CSS / box-decoration-break

For more info see: https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break

.box {
  width: 50rem;
  margin: 1rem auto;
  font-family: arial, verdana;
}

h1 {
  color: white;
  font-size: 2.5rem;
  line-height: 4rem; /* reduce size to remove gap between text */
  margin: 0px;
}

h1 span {
  background-color: #A8332E;
  padding: 0.5rem 0;
  -webkit-box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E;
  box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E;
  -webkit-box-decoration-break: clone;
  -ms-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
}

<div class="box">
  <h1>
    <span>Multi-line, padded, highlighted text working in latest Firefox using box-decoration-break: clone</span>
  </h1>
</div>

这篇关于是否可以为内联文本创建box-shadow效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！