html - 边框半径 CSS3

Question

仅使用 css3 制作这种边框的最佳方法是什么？

P.S: 宽度为100%，屏幕大小。

Answer 1

你可以使用伪效果来创建这样的东西:

html,body{
  padding:0;
  margin:0;
  }
body:before{
  content:"";
  position:absolute;
  top:-50%;
  height:200px;
  width:100%;
  background:red;
  border-radius:100%
  }
body:after{
  content:"";
  position:absolute;
  height:200px;
  border-left:2vw solid black;
  border-right:2vw solid black;
  width:96vw;
  }

它基本上是使用以下想法制作的:

          /----------------\  <-- oval shape
         /------------------\
        +--------------------+ <--top of screen
        |\                  /|
        | \________________/ |<--screen

有了 body 标签，“上半部分”现在会自动隐藏，留下:

        +--------------------+ 
        |\                  /|
        | \________________/ |

然后您可以使用另一种伪效果来将“黑色”边框添加到屏幕的左侧和右侧。