如何打破css中文本周围的边框？答案

【问题标题】：How do I break the border around text in css?如何打破css中文本周围的边框？
【发布时间】：2016-07-26 11:06:52
【问题描述】：

我正在为我的网站创建一个块引用，它目前看起来像这样： blockquote

我想打破开场白的边框，使它看起来像这样：

有人知道怎么做吗？这是我目前拥有的 CSS，如果有帮助的话。

blockquote {
        display: block;
        float: left;
        background: #ffffff;
        width: 180px;
        padding-bottom: 0px;
        font-style: italic;
        font-family: Helvetica, MetaOT-bold, sans-serif;
        font-size: 18px;
        line-height: 1.5;
        margin: 30px 25px 10px 0px;
        border: 2px solid #5fa0d8;
        border-bottom: 0;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        padding: 20px;
        padding-bottom: 0;
        position: relative;
        quotes:"\201C" "\201D";  /*Unicode for Quoteation marks*/
}

blockquote p {
    line-height: 1.5;
    padding-bottom: 0px;

}

blockquote:before, blockquote:after {
    color: #5fa0d8;
    font-family: Georgia, serif;
    font-style: normal;
    font-weight: bold;
    font-size: 100px;
    position: absolute;
}

blockquote::before {
    content: open-quote;
    left: 10px;
    top:-50px;
}

blockquote::after {
    content: close-quote;
    left: 160px;
    top:150px;
}

cite {
    display:block;
    background-color: #5fa0d8;
    width: 210px;
    float: left;
    color: #ffffff;
    font-size: 13px;
    font-style: normal;
    padding: 3px;
    padding-left: 10px;
    margin-left: -21px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    margin-top: 23px;
    margin-bottom: 0px;
}

【问题讨论】：

请给我们您的 HTML 和 CSS..
为什么在一个地方使用:before而在另一个地方使用::before

标签： css border-layout blockquote

【解决方案1】：

如果块引用仅用于白色背景，一个简单的解决方案是给blockquote::before 一个白色背景颜色。

编辑

我喜欢@MarkPerera 继承背景颜色而不是使用白色的想法，尽管我不确定这是否能正确工作。

【讨论】：

非常感谢您的帮助，不幸的是，添加白色背景会导致在引用周围文本的上方和下方出现大块空白。我尝试添加负边框/填充/边距，但没有任何区别。还是谢谢！

【解决方案2】：

我从你的 CSS 中假设，你的 HTML 应该是这样的：

<blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex cupiditate tenetur corporis officia corrupti at mollitia quam deleniti minus fuga accusantium, illo aliquid, eaque aperiam voluptatibus ad optio magni hic.</p>
    <cite>Cite box</cite>
</blockquote>

我创建了一个JSFiddle 来呈现您的块引用。我还更改了您使用大小的方式，因为无法添加更多或更少的文本。顺便说一句，我假设您使用的是示例中的白色背景。

【讨论】：

【解决方案3】：

用这个替换blockquote:before, blockquote:after { ... }

blockquote::before, blockquote::after {
    color: #5fa0d8;
    background-color: inherit;  //or white if it doesn't work
    font-family: Georgia, serif;
    font-style: normal;
    font-weight: bold;
    font-size: 100px;
    position: absolute;
}

附：为了保持一致性，我在这里也使用了双冒号

【讨论】：