虚线顶部和底部边框比文本短

Question

我想实现如下图所示的顶部和底部边框，我该如何使用 CSS 技巧实现？

挑战是我不想要带边框的整个宽度，它也应该是响应式的。

移动版图像是 http://i.imgur.com/XZTW28N.jpg，它应该也适用于桌面和移动浏览器。

我尝试使用 %width 边框，但它不起作用。

我写了下面的代码，但这对我来说不是 100% 完美的答案。

HTML:

<h1>How it Works</h1

CSS:

h1:before, h1:after {
    content: "";
    height: 1px;
    background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(147,147,147,1) 50%,rgba(0,0,0,0) 100%);
    display: block;
    margin-bottom: 10px;
    margin-top: 10px;
}

http://jsfiddle.net/wjhnX/488/

Answer 1

我对你的CSS做了一些修改：

h1{
    text-align: center;
    font-size: 70px;
}

h1:before, h1:after{
    position: relative;
    content: "";
    width: 30%;
    left: 35%;
    display: block;
    margin-bottom: 10px;
    margin-top: 10px;
    border-bottom: 5px dotted yellow;
}

DEMO

编辑：

如果你想要一个固定的 width 你可以添加：

h1:before, h1:after{
    width: 150px;     /* You can change this value */
    left: 50%;
    transform: translateX(-50%);
}

DEMO2

Answer 2

这是另一种使用 radial-gradient 背景图像在顶部和底部生成点的方法。输出是响应式的，没有。顶部和底部的点数由宽度决定（例如，width: 108px 产生 9 个点，因为 background-size 在 x 轴上是 12px）。

与其他方法相比，这种方法的优势在于可以更好地控制点的大小以及点之间的 space。缺点是 browser support for radial-gradient 与虚线边框方法相比较低 (IE10+)。

h1 {
  position: relative;
  text-align: center;
  font-size: 48px;
  line-height: 1em;
  padding: 0.625em;
  font-family: Calibri;
  font-weight: 100;
}
h1:after {
  position: absolute;
  content: '';
  width: 108px;  /* multiples of background-size in X-axis */
  height: 100%;
  top: 0px;
  left: calc(50% - 50px);
  background: radial-gradient(circle at 50% 50%, rgb(250, 189, 38) 30%, transparent 50%), radial-gradient(circle at 50% 50%, rgb(250, 189, 38) 30%, transparent 50%);
  background-size: 12px 6px;
  background-repeat: repeat-x;
  background-position: 50% 0.125em, 50% 2em;
}
/* Just for demo */

body {
  background: rgb(9, 133, 143);
  color: white;
}

<!-- library included to support older browsers -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<h1>How it works</h1>

<h1>How it works with long text</h1>

带大点的截图：

要使点变小，只需降低径向渐变的色标百分比即可。百分比越小，圆点越小。

h1 {
  position: relative;
  text-align: center;
  font-size: 48px;
  line-height: 1em;
  padding: 0.625em;
  font-family: Calibri;
  font-weight: 100;
}
h1:after {
  position: absolute;
  content: '';
  width: 108px;  /* multiples of background-size in X-axis */
  height: 100%;
  top: 0px;
  left: calc(50% - 50px);
  background: radial-gradient(circle at 50% 50%, rgb(250, 189, 38) 25%, transparent 35%), radial-gradient(circle at 50% 50%, rgb(250, 189, 38) 25%, transparent 35%);
  background-size: 12px 6px;
  background-repeat: repeat-x;
  background-position: 50% 0.125em, 50% 2em;
}

/* Just for demo */

body {
  background: rgb(9, 133, 143);
  color: white;
}

<!-- library included to support older browsers -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<h1>How it works</h1>

<h1>How it works with long text</h1>

小圆点截图：

Answer 3

您也可以使用 box-shadows 来实现此目的，首先在顶部创建一个 after 伪元素，在底部创建一个 before 伪元素，然后给出 box-shadows

body{
 background:#09858F;
}

div{
 position:relative;
 display:inline-block;
 margin:100px;
}
h1{
 text-align:center;
 font-family: Calibri;
 font-size:50px;
 color:#fff;
 margin:50px;
}

h1:after{
 content:"";
 position:absolute;
 left:30%;
 height:10px;
 width:10px;
 background:yellow;
 top:20%;
 border-radius:50%;
 box-shadow:20px 0 0 0  yellow,40px 0 0 0  yellow,60px 0 0 0  yellow,80px 0 0 0  yellow,100px 0 0 0  yellow,120px 0 0 0  yellow,140px 0 0 0  yellow,160px 0 0 0  yellow;
}
h1:before{
 content:"";
 position:absolute;
 left:30%;
 height:10px;
 width:10px;
 background:yellow;
 bottom:20%;
 border-radius:50%;
 box-shadow:20px 0 0 0  yellow,40px 0 0 0  yellow,60px 0 0 0  yellow,80px 0 0 0  yellow,100px 0 0 0  yellow,120px 0 0 0  yellow,140px 0 0 0  yellow,160px 0 0 0  yellow;
}

<div><h1>How it Works</h1></div>

虚线顶部和底部边框比文本短

Dotted top and bottom border shorter than text

html

css

border

css-shapes