带填充的线高

Question

Roko C. Buljan的解决方案无效，即

我想获得这种设计（假设背景是透明的独特颜色）：

我可以使用box-decoration-break属性。

不幸的是，IE中不支持属性box-decoration-break。

我看到类似于我的设计的东西，但是我不能在不破坏设计的情况下设置行高。

此外，当我更改字体大小时，设计会被破坏。

https://css-tricks.com/multi-line-padded-text/

这是我的jsfiddle： https://jsfiddle.net/9472J/37/

任何帮助表示赞赏！

Answer 1

div{width:130px; margin-left:20px}

span.padded{
  font:       18px/32px sans-serif;            /* Font size and line-height spacing */
  box-shadow: 8px 0 0 0 #555, -8px 0 0 0 #555; /* 8px horiz. "padding" */
  padding:    4px 0;                           /* 4px vertical padding */
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  color:      #fff;
  background: #555;
/*display:    inline; /* Uncomment if you use block-level element */
}

@-moz-document url-prefix() {
    span.padded{         /* 0.5px spread fixes blurry box shadow in FF */
        box-shadow: 8px 0 0 0.5px #555, -8px 0 0 0.5px #555; 
    }
}

<div>
  <span class="padded">Lorem ipsum this is some padded text with background</span>
</div>

FF半像素盒阴影精度问题已修复

Firefox有这个问题，不知道如何正确地box-shadow 0px spread-radius 模糊问题：

因此，必须使用（令人难以置信的）半像素精度表示盒阴影展开半径（仅限-moz！）：

0.5px spread-radius 模糊修复：

由于框架阴影上的using 0.5px spread-radius分别在Webkit中创建了相同的问题，所以我们只使用

来定位Mozilla

@-moz-document url-prefix() {
    span.padded{
        box-shadow: 8px 0 0 0.5px #555, -8px 0 0 0.5px #555;
    }
}

IE，Edge - 模糊box-shadow半像素问题

IE11 and Edge (Blur issue still present)

没有希望（在撰写本文时）

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

Answer 2

我认为这是使用所有浏览器支持的CSS规则最接近的。

这是我的尝试：

＆＃13;

＆＃13;

section {
  max-width:400px;
  padding:50px;
  margin:0 auto;
  background: url('http://lorempixel.com/400/800');
  background-size:cover;
  height:100vh;
}

section > h1 {
  display:inline;
  background:rgba(0,0,0,.7);
  box-shadow: 10px 0 0 rgba(0,0,0,.7), -10px 0 0 rgba(0,0,0,.7);
  color:#fff;
  padding:4px 0;
  line-height:200%;
  font-family: sans-serif;
  font-weight:100;
}

＆＃13;

<section>
  <h1>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolore, temporibus consequatur.
  </h1>  
</section>

＆＃13;

＆＃13;

＆＃13;

附加说明：

• 为了实现透明背景，我在背景和框阴影中使用rgba代替rgb。目前，不透明度设置为70％（.7 in rgba），但您可以将其设置为品尝。

Answer 3

box-shadow诀窍：

HTML：

<section>
  <span>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolore, temporibus consequatur.
  </span>  
</section>

CSS：

section {
  max-width:400px;
  padding:50px;
  margin:0 auto;
  background: url('http://lorempixel.com/400/800');
  background-size:cover;
  height:100vh;
}

span {
  font-family: sans-serif;
  font-size: 2em;
  font-weight: 100;
  line-height: 1.8;
  padding: 3px 0 6px 0;
  color: rgb(255, 255, 255);
  background-color: rgba(0, 0, 0, .6);
  box-shadow: 10px 0 0 rgba(0, 0, 0, .6), -10px 0 0 rgba(0, 0, 0, .6);
  box-decoration-break: clone;
}

<强>更新

现在它也适用于Firefox。由于FF上的默认值为box-decoration-break: split;，因此必须设置box-decoration-break: clone;。