HTML设置边款双实线粗细怎么设置

第二个是我做的双实线有点细，做了宽度还是和第二个不一样，但是和第一个做的双实线不一样，第一个怎么做

写个高度，加背景，然后border-top跟border-bottom

首先观察，这个边框不是纯粹的上下边框，类似垂直渐变，有底色

方式一：
背景平铺，切下宽高1px*4px，100%一致效果。
①：单独一个div写线的样式

div{
  width: 100%;
  height: 4px;
  background: url('图片地址') 0 0 repeat-x;
}

②伪类属性写线的样式，直接在容器div写

.容器样式选择器{
 position: relative;
 }
.容器样式选择器::after{
width: 100%;
height: 4px;
position: absolute;
bottom: 0px;
left: 0px;
background: url('图片地址') 0 0 repeat-x;
display: block;
content: ''

方式二：渐变，线为高度4px，颜色是4种，则如下，100%复原

.line{
width: 100%;
height: 4px;
 position: relative;
  background-image: linear-gradient(to bottom, #d3d3d3, #dddddd,#e5e5e5,#cdcdcd);
 }

//to bottom从上到下，to right 从左到右，一般渐变是2-3个颜色正常，这个只有4个可以这么搞，同样可以使用伪类::before 和::after写，优先推荐伪类，减少不必要的标签数