1.

 

 

2.

3.

 

 

4.  字体两边白条

h1{

  position: relative;

}

h1 p {

  text-align: center;

}

h1 p:before {

  position: absolute;

  top: 20px;

  margin-left: -46px;

  width: 30px;

  content: "\200B";

  height: 2px;

  overflow: hidden;

  background: rgba(0,0,0,0.3);

}

h1 p:after {

  position: absolute;

  top: 20px;

  margin-left: -16px;

  width: 30px;

  content: "\200B";

  height: 2px;

  overflow: hidden;

  background: rgba(0,0,0,0.3);

}

 5.

三个点可以用中间弄一个点，左右两边用border-shadow