Question

我有一个<blockquote>我希望用双顶边框设置样式，如下图所示：

棘手的部分是我想坚持使用一个元素<blockquote>元素，因为HTML将由WYSIWYG生成。

这是我到目前为止所得到的：

blockquote
  background: #fafcfc
  border-top: 1px solid #dfe7e9
  border-bottom: 1px solid #dfe7e9
  font-size: 19px
  font-style: italic
  font-weight: 300
  padding: 45px 40px
  margin: 35px 0

请注意，对于双引号字符串，我可能需要:before和:after。

Answer 1

线性梯度法

该技术利用线性梯度。请务必使用供应商作为生产前缀。

Here's a fiddle.

blockquote {
  background-image: linear-gradient(to right, rgba(41,137,216,0) 0%,rgba(37,131,210,0) 42%,rgba(37,131,210,1) 42%,rgba(36,129,208,1) 58%,rgba(36,129,208,0) 58%,rgba(32,124,202,0) 99%);
  background-position: top;
  background-size: 100% 8px;
  background-repeat: no-repeat;
}

背景图像方法

如果您希望蓝色条固定宽度并可调整大小，则可以使用base64-encoded 1 pixel image作为背景，而不是@ Joint的建议。

Here's a fiddle.

blockquote {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNUabzwHwAEvAJ2QlOyvQAAAABJRU5ErkJggg==);
  background-position: top;
  background-size: 120px 8px;
  background-repeat: no-repeat;
}

您可以将background-size更改为您需要的任何内容。

Answer 2

另一种选择是将此蓝色边框添加为图像并将其设置为blockquote的背景;）

Answer 3

<强>样本：

http://plnkr.co/edit/PMcA6au98ids02jXh7YV?p=preview

使用background image解决方案，同时为blockquote保留psuedo元素：

blockquote
{
width: 300px;
/*box-shadow: inset 1px 22px 1px -17px magenta;*/
background-image: url('http://i.imgur.com/ND7TghA.jpg');
background-repeat: no-repeat;
background-position: top center;
border-top: solid 2px #dde7e9;
border-bottom: solid 2px #dde7e9;
height: auto;
padding: 15px;
position: relative;
}

blockquote:before, blockquote:after  {
  position: absolute;
}

blockquote:before  {
  content: '"';
  top: 5px;
  left: -5px;
}

blockquote:after  {
  content: '"';
  bottom: 5px;
  right: -5px;
}

<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</blockquote>

Answer 4

这是我的看法。

使用blockquote:first-child:before和blockquote:first-child:after作为报价。或::last-child:before

您可以添加背景和内容。

  blockquote {
    margin: 35px 0;
    background: #fafcfc;
    border-top: 1px solid #dfe7e9;
    border-bottom: 1px solid #dfe7e9;
    font-size: 19px;
    font-style: italic;
    font-weight: 300;
    padding: 45px 40px;
  }

  blockquote:before {
    content: '';
    position: absolute;
    width: 4%;
    left: 48%; /* 2*left+width=100% */
    top: 35px; /* =blockquote margin */
    border-top: 5px solid blue;
        }

http://codepen.io/anon/pen/amPwOK

Answer 5

你必须在blockquote中添加一些绝对块元素，你可以通过添加css来实现：

blockquote:before
    content: ' ';
    display: block;
    position: absolute;
    width: 30px;
    height: 5px;
    background: blue;
    top: 0;
    margin: auto;
    left: 0;
    right: 0;

不要忘记将position: relative;添加到您的blockquote css。

编辑：要使用:before和:after作为报价，您可以在blockquote中添加一些容器，例如<p>或<span>，然后为其添加。

双顶边框，其中一个在一个元素上以一定宽度居中

5 个答案:

线性梯度法

Here's a fiddle.

背景图像方法

Here's a fiddle.