如何在CSS中打破文本周围的边框？

Question

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

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;
}

- LouiseW

---

请提供您的HTML和CSS。 - ristapk

为什么在一个地方使用：before而在另一个地方使用::before？ - Mark Perera

Answer 1

如果引用块仅在白色背景上使用，一个简单的解决方案是给 blockquote :: before 一个白色背景颜色。 编辑 我喜欢@ MarkPerera的想法，继承背景颜色而不是使用白色，尽管我不确定这是否有效。

- kalsowerus

---

非常感谢您的帮助，但不幸的是，添加白色背景会导致引用文本上下出现大块的白色空间。我尝试添加负边框/填充/边距，但没有任何改变。无论如何还是非常感谢！ - LouiseW

Answer 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来呈现你的引用块。我还改变了你使用大小的方式，因为无法添加更多或更少的文本。顺便说一句，我假设你正在使用像示例中的白色背景。

- Ersian

Answer 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;
}

顺便说一下，我在这里也使用了双冒号以保持一致性。

- Mark Perera