完成弯曲的边框不仅角落

Question

我有一个模板照片来为它创建HTML。

问题是用箭头标记在图像中。在滑块下有一个部分，它有一个弯曲的边界（浅蓝色），我试图用border-radius属性来实现它，并且我对它做了很多调整。毕竟只是角落弯曲或半径比我所需要的更多。我如何在CSS中实现它？谢谢。

Answer 1

您可以制作一个宽度超过100％的大元素，并为其添加边框半径。下面是我的意思的例子：

.bigCircle { 
    background: #ffffff; 
    height:500px; 
    width:200%; 
    margin-left: -50%; 
    border-radius: 100%; 
    margin-top: 100px; 
} 

body { 
 
    background: #000000; 
 
    overflow-x: hidden; 
 
} 
 
.bigCircle { 
 
    background: #ffffff; 
 
    height:500px; 
 
    width:200%; 
 
    margin-left: -50%; 
 
    border-radius: 100%; 
 
    margin-top: 100px; 
 
    border: 10px solid #00AAFF; 
 
} 
 

 
p { 
 
    text-align: center; 
 
    font-family: Arial, sans-serif; 
 
}

<div class="bigCircle"> 
 
    <p> Wow you're huge!</p> 
 
</div>

编辑：删除Codepen链接，并添加一段代码。

Answer 2

只要有巨大的圆形物体定位，以适应设计：

.wrapper { 
 
    position: relative; 
 
    width: 500px; 
 
    height: 900px; 
 
    border: 1px solid #ddd; 
 
} 
 
.curve { 
 
    position: absolute; 
 
    width: 100%; 
 
    left:0; 
 
    top: 0; 
 
    height: 200px; 
 
    overflow: hidden; 
 
} 
 
.curve:after { 
 
    content: ''; 
 
    display: block; 
 
    border-radius: 50%; 
 
    width: 2000px; 
 
    height: 1000px; 
 
    top: 0; 
 
    position: absolute; 
 
    left: -750px; 
 
    border: 3px solid blue; 
 
}

<div class="wrapper"> 
 
    <div class="curve"></div> 
 
</div>

Answer 3

的边界半径CSS属性可以定义边框边角圆润怎么是。每个角的曲线用一个或两个半径定义，定义其形状：圆形或椭圆形。

希望这将有助于使模板照片的曲线边框。

/* The syntax of the first radius allows one to four values */ 
/* Radius is set for all 4 sides */ 
border-radius: 10px; 

/* top-left-and-bottom-right | top-right-and-bottom-left */ 
border-radius: 10px 5%; 

/* top-left | top-right-and-bottom-left | bottom-right */ 
border-radius: 2px 4px 2px; 

/* top-left | top-right | bottom-right | bottom-left */ 
border-radius: 1px 0 3px 4px; 

/* The syntax of the second radius allows one to four values */ 
/* (first radius values)/radius */ 
border-radius: 10px 5%/20px; 

/* (first radius values)/top-left-and-bottom-right | top-right-and-bottom-left */ 
border-radius: 10px 5%/20px 30px; 

/* (first radius values)/top-left | top-right-and-bottom-left | bottom-right */ 
border-radius: 10px 5px 2em/20px 25px 30%; 

/* (first radius values)/top-left | top-right | bottom-right | bottom-left */ 
border-radius: 10px 5%/20px 25em 30px 35em; 

border-radius: inherit; 

Answer 4

你可以试试你的图像容器下像一个div，

.oval-container { 
 
    width: 100%; 
 
    overflow: hidden; 
 
    height: 50px 
 
} 
 
.oval { 
 
    height: 200px; 
 
    border-radius: 100%; 
 
    -moz-border-radius: 100%; 
 
    -webkit-border-radius: 100%; 
 
    background: #EFEFEF; 
 
    overflow: hidden; 
 
    width: 120%; 
 
    margin-left: -10%; 
 
    border: 5px solid blue; 
 
}

<div class="oval-container"> 
 
    <div class="oval">test</div> 
 
</div>