5

我有一个<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

4

5 回答 5

5

线性梯度法

这种技术利用了线性梯度。确保为生产添加供应商前缀。

这是一个小提琴。

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

背景图片法

如果您希望蓝色条具有固定宽度和可调整大小，则可以根据@Joint 的建议使用base64 编码的 1 像素图像作为背景。

这是一个小提琴。

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

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

在此处输入图像描述

于 2016-10-21T08:50:41.483 回答
0

这是我的看法。

使用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

于 2016-10-21T09:28:17.647 回答
0

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

于 2016-10-21T08:48:00.483 回答
0

演示：

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

background image在为块引用保留伪元素时使用的解决方案：

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>

于 2016-10-21T09:18:53.807 回答
-1

您必须为您的块引用添加一些绝对块元素，您可以通过添加 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引用，您可以添加一些容器，如<p>或<span>在块引用内，然后为其添加。

于 2016-10-21T08:41:16.603 回答