Question

我想创造这种效果：

enter image description here

有没有办法通过CSS / JS做到这一点？

非常感谢我是网页设计的新手，过去几个小时我一直在努力解决这个问题！

Answer 1

这是一种使用CSS实现文本的多行，填充，突出显示行为的方法。

这是基于其他地方的box-shadow方法，但是从Firefox 32开始，传统的box-shadow解决方案不再正确呈现。

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

有关详细信息，请参阅： 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>

Answer 2

我不知道为什么这会被投票，我几年前问过这个问题，没有办法用我知道的纯css做这个，但是有一个插件共享：

http://jsfiddle.net/OwenMelbz/rd8Qc/

原始问题：Persistant padding on a text that wraps?

/*!
 * jQuery Typographic Background Plugin
 * http://owenmelbourne.com
 *
 * Copyright 2012, Owen Melbourne || Selesti Ltd
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.opensource.org/licenses/GPL-2.0
 */

(function($){
 $.fn.typographicbg = function(options) {

 var defaults = {
   padding: '5px',
  };
 var options = $.extend(defaults, options);

return this.each(function() {

  var selector = $(this);
  var padding = options.padding;

  $(selector).each(function(){

  // Wrapping Words in Spans for padding application
        var string = $(this).text().split(' ');
        var word = $(this);
        $(this).text('');
        $.each(string, function(){
            word.append('<span>'+this+' </span>');
        });

        $(this).find('span').css({'padding-top': padding, 'padding-bottom': padding});
        $(this).find('span:first-child').css('padding-left', padding);
        $(this).find('span:last-child').css('padding-right', padding);

        var startingheight = $(this).find('span').position().top;
        $(this).find('span').each(function(){

        var thisheight = $(this).position().top;

//Apply the padding to new lines and previous
            if (thisheight > startingheight) {
            $(this).attr('data-ypos','height is: '+thisheight);
            startingheight = thisheight;
            $(this).css('padding-left', padding);
            $(this).prev().css('padding-right', padding);
            }


        });


    });

}); 
 }; 
})(jQuery);

Answer 3

这可以通过line-height，padding和background-color

p {
  background: black;
  color: white;
  display: inline;
  line-height: 2;
  padding: 5px;
}

<p>This is a demonstration of how to have a multiline padded background color on any amount of text. enjoy</p>

Answer 4

还有另一种类似的方法，只需要少量的javascript。与上面的答案类似，但将所有样式放在CSS而不是内联元素

（无法让SO代码编辑器工作）

http://jsbin.com/mohuti/1/edit?html,css,js,output

<h1 id="heading">This is a demonstration of how to have a multiline padded background color on any amount of text. enjoy</h1>

h1 {
  margin: 0 !important;
  clear: both;
  overflow: hidden;
  padding-left: 20px;
  position: relative;
}

h1:before {
  content: '';
  width: 20px;
  left: 0;
  height: 100%;
  background: #333333;
  position: absolute;
}

h1 span {
  position: relative;
  float: left;
  background: #333333;
  color: #ffffff;
  padding: 10px 30px 10px 0;
  font-size: 80px;
  line-height: 1em;
  letter-spacing: -2px;
}

// Pure JS

var foo = document.getElementById("heading");
foo.innerHTML = foo.innerText.replace(/\S+/g, function (word) {
    return "<span>" + word + "</span>";
});


// jQuery
var words = $("h1").text().split(" ");
$("h1").empty();
$.each(words, function(i, v) {
    $("h1").append($("<span>").text(v));
});

是否可以为内嵌文本创建盒阴影效果？

4 个答案: