我想知道是否有可能在CSS中复制这个Film 4框阴影/边框效果?
.cx-report-header__sales_header {
text-align: center;
color: #3639415c;
font-family: 'Open Sans', sans-serif;
}
.cx-report-top-stat__figures {
font-size: 4em;
}
.cx-report-top-stat__words {
color: #50b79b;
text-transform: uppercase;
font-size: 2.8em;
}
.cx-report-top-stat__words__split {
color: #50b79b91;
}
.cx-report-header__sales_header:first-child {
border-right: 2px solid #36394112;
}
.cx-report-header__sales_header:last-child {
border-left: 2px solid #36394112;
}
.cx-report-header__pie_chart:first-child {
border-right: 1px solid #36394112;
}
.cx-report-header__pie_chart:last-child {
border-left: 1px solid #36394112;
}
.cx-cut-shadow__bottom {
position: relative;
width: 100%;
height: 40px;
background: white;
margin-top: 15px;
}
.cx-cut-shadow__bottom:before {
content: '';
position: absolute;
left: calc(50% / 2);
width: 50%;
height: 20px;
box-shadow: 0 1px 10px 5px rgb(175, 177, 179);
border-radius: 100%;
border: 0 solid white;
border-top: 1px;
z-index: 1;
}
.cx-cut-shadow__bottom_cover {
width: 100%;
height: 34px;
position: absolute;
background-color: white;
top: 190px;
z-index: 2;
left: 0px;
}
.cx-cut-shadow__top {
position: relative;
width: 100%;
height: 40px;
background: white;
}
.cx-cut-shadow__top:before {
content: '';
position: absolute;
left: calc(50% / 2);
width: 50%;
height: 20px;
box-shadow: 0 1px 10px 5px rgb(175, 177, 179);
border-radius: 100%;
border: 0 solid white;
border-top: 1px;
z-index: 1;
}
.cx-cut-shadow__top_cover {
width: 100%;
height: 34px;
position: absolute;
background-color: white;
top: -8px;
z-index: 2;
left: 0px;
}
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 cx-report-header__sales_header">
<div class="cx-cut-shadow__top"></div>
<div class="cx-cut-shadow__top_cover"></div>
<div class="cx-report-top-stat__figures">90%</div>
<div class="cx-report-top-stat__words"><b>chats</b> <span class="cx-report-top-stat__words__split">increase</span></div>
<div class="cx-cut-shadow__bottom"></div>
<div class="cx-cut-shadow__bottom_cover"></div>
</div>
发布于 2018-08-01 14:24:29
试试这个:
.cx-report-header__sales_header {
text-align: center;
color: #3639415c;
font-family: 'Open Sans', sans-serif;
}
.cx-report-top-stat__figures {
font-size: 4em;
}
.cx-report-top-stat__words {
color: #50b79b;
text-transform: uppercase;
font-size: 2.8em;
}
.cx-report-top-stat__words__split {
color: #50b79b91;
}
.cx-report-header__sales_header:first-child {
border-right: 2px solid #36394112;
}
.cx-report-header__sales_header:last-child {
border-left: 2px solid #36394112;
}
.cx-report-header__pie_chart:first-child {
border-right: 1px solid #36394112;
}
.cx-report-header__pie_chart:last-child {
border-left: 1px solid #36394112;
}
.cx-cut-shadow__bottom {
position: relative;
width: 100%;
height: 40px;
background: white;
margin-top: 15px;
}
.cx-cut-shadow__bottom:before {
content: '';
position: absolute;
left: calc(50% / 2);
width: 50%;
height: 20px;
box-shadow: 0 1px 10px 5px rgb(175, 177, 179);
border-radius: 100%;
border: 0 solid white;
border-top: 1px;
z-index: 1;
}
.cx-cut-shadow__bottom_cover {
width: 100%;
height: 34px;
position: absolute;
background-color: white;
top: 190px;
z-index: 2;
left: 0px;
}
.cx-cut-shadow__top {
position: relative;
width: 100%;
height: 40px;
background: white;
}
.cx-cut-shadow__top:before {
content: '';
position: absolute;
left: calc(50% / 2);
width: 50%;
height: 20px;
box-shadow: 0 1px 10px 5px rgb(175, 177, 179);
border-radius: 100%;
border: 0 solid white;
border-top: 1px;
z-index: 1;
}
.cx-cut-shadow__top_cover {
width: 100%;
height: 34px;
position: absolute;
background-color: white;
top: -8px;
z-index: 2;
left: 0px;
}
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 cx-report-header__sales_header">
<div class="cx-cut-shadow__top"></div>
<div class="cx-cut-shadow__top_cover"></div>
<div class="cx-report-top-stat__figures">90%</div>
<div class="cx-report-top-stat__words"><b>chats</b> <span class="cx-report-top-stat__words__split">increase</span></div>
<div class="cx-cut-shadow__bottom"></div>
<div class="cx-cut-shadow__bottom_cover"></div>
</div>
https://stackoverflow.com/questions/-100001820
复制相似问题