如何打破 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:"1C" "1D";  /*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;
}

Answer 1

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

编辑

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

Answer 2

用这个

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

P.S。为了保持一致性，我在这里也使用了双冒号

Answer 3

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

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

How do I break the border around text in css?

css

border-layout

blockquote