边框一侧的CSS边框阴影

Question

嗨，大家好我需要制作一个像这样的阴影标题，我无法理解我怎么能做到。到目前为止，这是我能够得到的，我真正关心的是线条末端的阴影。感谢

.divider {
    color: #282837;
    width: 70%;
    margin: 20px auto;
    overflow: hidden;
    text-align: center;
    line-height: 1.2em;
    font-size: 30px;
    text-transform: uppercase;
    font-weight: 400;
}


.divider:before, .divider:after {
    content: "";
    vertical-align: middle;
    display: inline-block;
    width: 15%;
    border-bottom: 1px dashed #9A9A9A;
    margin: 0 2% 0 -55%;
}

<h1 class="divider">MEET OUR <span class="divider-2"> TEAM</span></h1>

Answer 1

.divider {
color: #282837;
position:relative;
width: 70%;
margin: 20px auto;
overflow: hidden;
text-align: center;
line-height: 1.2em;
font-size: 30px;
text-transform: uppercase;
font-weight: 400;
}
 .divider:before, .divider:after {
content: "";
width: 15%;
border-bottom: 1px dashed #9A9A9A;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.divider:after {
right: 0;
}
.divider:before {
left: 0;
}

<h1 class="divider">MEET OUR <span class="divider-2"> TEAM</span></h1>

Answer 2

.divider {
    color: #282837;
    width: 70%;
    margin: 20px auto;
    overflow: hidden;
    text-align: center;
    line-height: 1.2em;
    font-size: 30px;
    text-transform: uppercase;
    font-weight: 400;
}


.divider:before, .divider:after {
    content: "";
    vertical-align: middle;
    display: inline-block;
    width: 15%;
    height: 1px;
     background: linear-gradient(to right, transparent 50%, #ffffff 50%),  
                 linear-gradient(to right, #ffffff, #000000);
     background-size: 8px 1px, 100% 1px;
     margin: 0;
}
.divider:after {
     background: linear-gradient(to right, transparent 50%, #ffffff 50%),  
                 linear-gradient(to left, #ffffff, #000000);
     background-size: 8px 1px, 100% 1px;
}

<h1 class="divider">MEET OUR <span class="divider-2"> TEAM</span></h1>

您可以通过背景图像堆叠来实现此目的。 在第一级中，您可以定义虚线：

background: linear-gradient(to right, transparent 50%, #ffffff 50%),  

在第二个整体渐变中：

 linear-gradient(to right, #ffffff, #000000);

重复第二个镜面反射：

linear-gradient(to left, #ffffff, #000000);

Answer 3

要执行此操作，您必须使用position属性并使用背景图像而不是边框​​

.divider {
    color: #282837;
    width: 70%;
    margin: 20px auto;
    overflow: hidden;
    text-align: center;
    line-height: 1.2em;
    font-size: 30px;
    text-transform: uppercase;
    font-weight: 400;
position: relative;
}

.divider-2 { color: red; }

.divider:before {
    content: "";
    vertical-align: middle;
    display: inline-block;
    width: 15%;
    border-bottom: 1px dashed #9A9A9A;
position: absolute;
top: 20px;
left: 0px;
}

.divider:after {
content: "";
vertical-align: middle;
display: inline-block;
width: 15%;
border-bottom: 1px dashed #9A9A9A;
position: absolute;
right: 0;
top: 20px;}

<h1 class="divider">MEET OUR <span class="divider-2"> TEAM</span></h1>