3

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

我想打破开盘价周围的边界，使它看起来像这样：

首选风格

有谁知道如何做到这一点？这是我目前拥有的 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;
}
4

3 回答 3

3

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

编辑

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

于 2016-07-26T11:09:58.630 回答
1

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

于 2016-07-26T11:23:53.320 回答
0

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

PS我在这里也使用了双冒号以保持一致性

于 2016-07-26T11:16:56.717 回答