찾다

 >  Q&A  >  본문

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

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

PHP中文网PHP中文网2778일 전1034

모든 응답(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
  • PHPz

    PHPz2017-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
  • 취소회신하다