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

Question

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

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

但是这一次，我想使矩形的顶部变得更圆角，如矩形的底部，所以我使用了边界半径，但是并没有得到我想要的方式。

这是我的代码

.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伪元素代替该渐变，将其绝对定位在所有其他内容下，然后执行您想要的操作。

Answer 2

它似乎按预期运行得很好。这里的问题是您无法查看它，因为顶部栏的背景色是白色，因此您的身体背景色也是白色。如果将其更改为其他内容，则会看到不同之处。

将线性渐变的颜色更改为

 .carousel {
     ...
     background: linear-gradient(180deg, grey 15%,#0E2149 15%);
     /* You can use any other color than grey, it's just for demo purpose */
     ...
 }

或者您可以使用伪选择器来实现所需的功能。 这是使用::before并将其位置设置为绝对位置的示例：

.carousel {
    /* remove linear gradient from here! */
}

.carousel::after {
    position: absolute;
    left: 0;
    top: 15%;
    content: ' ';
    width: 100%;
    height: 85%;
    background: #0E2149;
    z-index: -1; /* To keep it below the content */
    border-radius: 20px;
}
.carousel::before {
    position: absolute;
    left: 0;
    top: 0;
    content: ' ';
    width: 100%;
    height: 20%; /* Extra 5% */
    background: white;
    z-index: -2; /* To keep it below the content and the ::after element */
}

Answer 3

您是否期望这样：

   .carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-bottom: 20px;
    border-radius: 15px;
      box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2), 0 4px 20px 0 rgba(0,0,0,0.19);

}
hr{
    margin:2px 40px;
    background-color:#cbcbcb;
    color: #cbcbcb;
    border-radius: 10px;
}
.col-center {
    margin: 0 auto;
    float: none !important;
}
.carousel {
    margin: 0px auto;
    padding: 0 70px;
    height: 100%;

    border-radius: 20px;
}
.carousel {
    position: relative;
}
.carousel .item {
    color: #fff;
    font-size: 14px;
    background-color: white;
    text-align: center;
    overflow: hidden;
    min-height: 290px;
    position: relative;
}
.carousel .item::after{
  content: "";

  display: block;
  background-color:#0E2149;
  position: absolute;
  left: 0;
  right: 0;
  top: 100px;
  bottom: 0;
  border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;

}
.carousel .item > *{
  position: relative;
  z-index: 1;
}
.carousel .item .img-box {
    width: 130px;
    height: 130px;
    margin: 0 auto;
    margin-top: 25px;
    border-radius: 50%;
    padding: 10px;
    background-color:#0E2149 ;
   
}
.carousel .img-box img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
}
.carousel .testimonial {
    padding: 0px 0 0px;
    line-height: 1.5;
    color: white;
    font-weight:  bold;
    font-size: 30px;
}
.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);
}

<section class="second-section">
<div class="container">
<div class="row">

<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="https://dummyimage.com/300" alt=""></div>
<p class="testimonial">Some text here
</p>
<hr>
<p class="overview"><b>Paula Wilson</b>, Media Analyst</p>
</div>
</div>


<div class="carousel-inner">

<div class="item carousel-item">
<div class="img-box"><img src="https://dummyimage.com/300" alt=""></div>
<p class="testimonial">Text here</p>
<p class="overview"><b>Antonio Moreno</b>, Web Developer</p>
</div>
</div>
    <div class="carousel-inner">

<div class="item carousel-item">
<div class="img-box"><img src="https://dummyimage.com/300" alt=""></div>
<p class="testimonial">Text here</p>
<p class="overview"><b>Antonio Moreno</b>, Web Developer</p>
</div>
</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>
</div>    
</section>