html - 线性渐变背景中的顶部边框半径

Question

我正在轮播中制作推荐功能这是我想要实现的示例图片

这就是我到目前为止所取得的成就 https://jsfiddle.net/2we347xu/

但是这次我想让矩形的顶部像它的底部一样更圆一些，所以我使用了 border-radius 但结果并不是我想要的。

这是我的代码

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.col-center {
	margin: 0 auto;
	float: none !important;
}
.carousel {
    margin: 0px auto;
    padding: 0 70px;
    height: 100%;
    background: linear-gradient(180deg, white 15%,#0E2149 15%);
    border-radius: 20px;
}
.carousel {
    position: relative;
}
.carousel .item {
	color: #fff;
	font-size: 14px;
    text-align: center;
	overflow: hidden;
    min-height: 290px;
}
.carousel .item .img-box {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    padding: 5px;
    border: 10px solid #0E2149;
    border-radius: 50%;
    background: #fff;
}
.carousel .img-box img {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 50%;
}
.carousel .testimonial {
    padding: 0px 0 0px;
    line-height: 1.5;
    color: #fff;
}
.carousel .overview {	
	font-style: italic;
}
.carousel .overview b {
	text-transform: uppercase;
	color: #7AA641;
}
.carousel .carousel-control {
	width: 40px;
    height: 40px;
    margin-top: -20px;
    top: 50%;
	background: none;
}
.carousel-control i {
    font-size: 30px;
    line-height: 65px;
    position: absolute;
    display: inline-block;
    color: rgba(0, 0, 0, 0.8);
    text-shadow: 0 3px 3px #e6e6e6, 0 0 0 #000;
    margin-left: -5px;
}
.carousel .carousel-indicators {
	bottom: -40px;
}
.carousel-indicators li, .carousel-indicators li.active {
	width: 10px;
	height: 10px;
	margin: 1px 3px;
	border-radius: 50%;
}
.carousel-indicators li {	
	background: #999;
	border-color: transparent;
	box-shadow: inset 0 2px 1px rgba(0,0,0,0.2);
}
.carousel-indicators li.active {	
	background: #555;		
	box-shadow: inset 0 2px 1px rgba(0,0,0,0.2);
}

<div class="col-md-4">
  <div class="row">
      <div class="col-md-12">
          <div id="myCarousel" class="carousel slide" data-ride="carousel">
              <!-- Carousel indicators -->
              <!-- Wrapper for carousel items -->
              <div class="carousel-inner">
                  <div class="item carousel-item active">
                      <div class="img-box"><img src="images/cd logo.jpg" alt=""></div>
                      <p class="testimonial">Some text here
                      </p>
                      <p class="overview"><b>Paula Wilson</b>, Media Analyst</p>
                  </div>
                  <div class="item carousel-item">
                      <div class="img-box"><img src="/examples/images/clients/2.jpg" alt=""></div>
                      <p class="testimonial">Text here</p>
                      <p class="overview"><b>Antonio Moreno</b>, Web Developer</p>
                  </div>
                         
                    </div>
                    <!-- Carousel controls -->
                    <a class="carousel-control left carousel-control-prev" href="#myCarousel" data-slide="prev">
                        <i class="fa fa-angle-left"></i>
                    </a>
                    <a class="carousel-control right carousel-control-next" href="#myCarousel" data-slide="next">
                        <i class="fa fa-angle-right"></i>
                    </a>
                </div>
            </div>
            <div id="background"></div>
        </div>
</div>

如何实现轮播顶部的外观？

Answer 1

您可以使用 :before 或 :after 伪元素代替渐变，将其绝对定位在所有其他内容下方，然后执行您想要的操作。