Create a “inset” effect using CSS in websites

后端 未结 8 979
轮回少年
轮回少年 2020-12-28 10:14

I am very much impressed by the \"inset\" like effect in many latest websites. Some examples are

and

The line in the center. Nowadays, many webs

8条回答
  •  醉话见心
    2020-12-28 10:35

    Here is a more current and flexible solution that can be used.

    JSFIDDLE

    .hr {
      background: rgba(0, 0, 0, 0.6);
      height: 1px;
      width: 100%;
      display: block;
      border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    }
    
    
    

    By using RGBA(Red, Green, Blue, Alpha) you can use white/black with an alpha(opacity) to make the illusion of an inset effect.

提交回复
热议问题