记录一次问题和处理

记一次边框内凹的项目处理

前言

接到ui开始画图,这个样子的

以往之前的思路开干,给当前元素添加两个伪元素,定位过去.像这样

.details-list:before {
    content: "";
    width: 11px;
    height: 11px;
    border-radius: 50%;
    top: -6px;
    left: 74px;
    position: absolute;
    background-color: #f5f5f5;
}

想象中效果这样

然而事实没这么简单
发现跟之前不同的点,元素的背景色和容器的背景色完全一样,都是#fff,没有反差,根本起不到作用
ui上之所以能看出明显差别,是因为边缘处的边框阴影
无奈之下在伪元素上加上径向渐变,慢慢调样式,终于ok

.rebateCoupon:before {
    content: "";
    width: 0.2rem;
    height: 0.2rem;
    border-radius: 50%;
    position: absolute;
    top: -0.1rem;
    left: 1.48rem;
    background-image: radial-gradient(#f4f4f4 20%, #E4E4E4 80%);
}

最终效果

结尾

没想到更好的方法,欢迎大家交流指点