完整的弯曲边框不仅仅是角落

Question

我有一张模板照片，可以为其创建HTML。

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

Answer 1

您可以创建一个宽度超过100％的大元素并为其添加Border-radius。这是我的意思的一个例子：

.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

border-radius 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，例如

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;