边框半径 CSS3

Question

只用 css3 做这种边框的最好方法是什么？

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

Answer 1

最接近的是以下 HTML:

body {
      border: 0;
      padding: 0;
      margin: 0;
     }
    
    .content {
     width: 100%;
     height: 200px;
     background-color: green;
     border-bottom-right-radius: 50%;
     border-bottom-left-radius: 50%;
    }

<div class="content">test</div>

但是，您会注意到它的边缘并没有完全平滑。如果你想要这种效果，你需要将 div 的宽度扩展到 100% 以上，在 left: 0 之前启动它，并隐藏任何超过 100% 宽度的内容以删除水平滚动条。

Answer 2

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

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 标签，'upper part' 现在会自动隐藏，留下：

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

然后您可以使用另一种伪效果在屏幕的左侧和右侧添加 'black' 边框。

边框半径 CSS3

Border radius CSS3

html

css

border

css-shapes