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

Question

我有一个 <blockquote>，我想为其设置双顶边框的样式，如图所示：

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

这是我目前得到的：

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

你必须在块引用中添加一些绝对块元素，你可以通过添加 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>，然后为其添加。

Answer 2

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

Answer 3

线性渐变法

此技术使用线性渐变。确保为生产添加供应商前缀。

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

背景图片法

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

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 4

演示：

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

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

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 5

这是我的看法。

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

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

Double top border of which one is centered with a certain width on one element

css

blockquote

线性渐变法

Here's a fiddle.

背景图片法

Here's a fiddle.