Question

我正在为我的网站创建一个blockquote，它目前看起来像这样： 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;
}

Answer 1

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

修改

我喜欢@MarkPerera继承背景颜色而不是使用白色的想法，虽然我不确定这是否正确。

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来渲染您的blockquote。我也改变了使用大小的方式，因为无法添加更多或更少的文本。顺便说一下，我假设你使用的是像你的例子中的白色背景。

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

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

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

3 个答案: