登录

css - 边框凹陷效果怎么实现

如图这种凹陷效果的分割线,用css3怎么实现

# CSS3
PHP中文网PHP中文网2147 天前698 次浏览

全部回复(3) 我要回复

  • 阿神

    阿神2017-04-17 11:34:59

    box-shadow:0 1px 0 rgba(0,0,0,.2) inset,0 -1x 0 rgba(255,255,255,.2) inset;
    交换1px与-1px可以凸起;高亮和暗边是半透明了;不用考虑颜色了;

    回复
    0
  • PHPzhong

    PHPzhong2017-04-17 11:34:59

    嗯,谢谢 @golden_freeman_china 的提示。

    box-shadow: inset 0 -1px 0 rgba( 255, 255, 250, 0.6), 
                inset 0 -2px 0 rgba( 0, 0, 0, 0.1);

    回复
    0
  • 黄舟

    黄舟2017-04-17 11:34:59

    :before,:after{
    border:1px solid yellow;

    }

    伪元素配合两个border就可以实现,两个border的颜色是关键

    回复
    0
  • 取消回复发送