单边内阴影(梁王的开发笔记)

今天发现设计稿一个bug

单边内阴影(梁王的开发笔记)_第1张图片
啊.png

如果说图片是一张背景偏白色的,那么这两个按钮就没法看得清楚,比如下图。

单边内阴影(梁王的开发笔记)_第2张图片
no title (1).png

所以考虑是不是对图片或者整个card加一层上方的内阴影,使得按钮能够清晰的显示出来。

代码如下:
div上的

    .image {
        &:before {
              content:"";
              position:absolute;
              width:100%;
              height:100%;
              box-shadow:0 45px 10px 0px  rgba(76,17,17,.1) inset;   
        }
    }

效果图如下:

单边内阴影(梁王的开发笔记)_第3张图片
no title (2).png

box-shadow参考资料: box-shadow总结(梁王的理论自习室)

你可能感兴趣的:(单边内阴影(梁王的开发笔记))