边框半径CSS3

Question

仅使用CSS3进行这种边界的最佳方法是什么？

PS：宽度为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标签，“上部”现在会自动隐藏，留下：

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

然后，您可以使用其他伪效果，以便在屏幕的左侧和右侧添加“黑色”边框。