虚线顶部和底部边框比文字

Question

我想在下面的图像中实现边框顶部和底部我如何使用CSS技巧实现？

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

移动版图片为http://i.imgur.com/XZTW28N.jpg，它也可以在桌面和移动浏览器中使用。

我尝试使用％宽度边框，但它无效。

我在下面写了代码，但对我来说并不是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

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

＆＃13;

＆＃13;

box-shadows

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

这种方法优于其他方法的优点在于，这允许更好地控制点的大小和点之间的空间。与虚线边框方法相比，缺点是browser support for radial-gradient更低（IE10 +）。

＆＃13;

＆＃13;

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

＆＃13;

<!-- 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>

＆＃13;

＆＃13;

＆＃13;

大点的屏幕截图：

要使点尺寸更小所需要做的就是减少径向渐变的颜色停止百分比。百分比越小，点越小。

＆＃13;

＆＃13;

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

＆＃13;

<!-- 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>

＆＃13;

＆＃13;

＆＃13;

点较小的屏幕截图：