Я хочу создать стек карточек с помощью css box-shadow, он отлично работает без border-radius, но когда я добавляю радиус, он теряет округлость по мере продвижения. См. Приведенный ниже код.

Я хочу этот результат

enter image description here

body {
  background :  #0c1013;
  font-family : arial;
}

.card {
  margin: 0 auto 2em;
  padding: 2em;
  width: 80%;
  border-radius:4px;
  background-color: #f2f2f2;
  word-wrap: break-word;
  box-shadow: 0 0.0625em 0.1875em 0 rgba(0, 0, 0, 0.1), 0 0.5em 0 -0.25em #f2f2f2, 0 0.5em 0.1875em -0.25em rgba(0, 0, 0, 0.1), 0 1em 0 -0.5em #e5e5e5, 0 1em 0.1875em -0.5em rgba(0, 0, 0, 0.1);
}

.card.noradius {
  border-radius:0;
}
<div class="card">
    <p>Here's a stack of cards <code>with border radius</code>. </p>
</div>

<div class="card noradius">
    <p>Here's a stack of cards <code>without border radius</code>. </p>
</div>
0
Saqueib 11 Май 2016 в 14:08

3 ответа

Лучший ответ

Если вам не нужно использовать тень блока для эффекта карты, вы можете использовать псевдоэлементы после и до, чтобы получить больший контроль над радиусами нижних границ карты:

body {
  background: #0c1013;
  font-family: arial;
}
.card {
  position: relative;
  margin: 0 auto 2em;
  width: 80%;
}
.card .inner {
  padding: 2em;
  border-radius: 4px;
  background-color: #f2f2f2;
  word-wrap: break-word;
  position: relative;
  z-index: 3;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.75);
}
.card:before,
.card:after {
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.75);
  content: '';
  display: block;
  position: absolute;
  height: 9px;
  border-radius: 4px;
}
.card:before {
  bottom: -4px;
  left: 4px;
  right: 4px;
  background-color: #6B6F70;
  z-index: 2;
}
.card:after {
  bottom: -8px;
  left: 8px;
  right: 8px;
  background-color: #3B3F40;
  z-index: 1;
}
.card.noradius .inner,
.card.noradius:before,
.card.noradius:after {
  border-radius: 0;
}
<div class="card">
  <div class="inner">
    <p>Here's a stack of cards <code>with border radius</code>.</p>
  </div>
</div>

<div class="card noradius">
  <div class="inner">
    <p>Here's a stack of cards <code>without border radius</code>.</p>
  </div>
</div>
3
Pete 11 Май 2016 в 11:39

Попробуй это:

    .card.noradius {
        border-radius: 6px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
}
1
Asim Iqbal 11 Май 2016 в 11:23

Я думаю тебе это нужно

body {
  background :  #0c1013;
  font-family : arial;
}
.card {
  margin: 0 auto 2em;
  padding: 2em;
  width: 80%;
  border-radius:10px;
  background-color: #f2f2f2;
  word-wrap: break-word;
  box-shadow: 0 0.0625em 0.1875em 0 rgba(0, 0, 0, 0.1), 0 0.5em 0 -0.25em #6C7071, 0 0.5em 0.1875em -0.25em rgba(0, 0, 0, 0.1), 0 1em 0 -0.5em #3B3F40, 0 1em 0.1875em -0.5em rgba(0, 0, 0, 0.1) !important;
}


.card.noradius {
    border-radius:0;
}
<div class="card">
	<p>Here's a stack of cards <code>with border radius</code>. </p>
</div>

<div class="card noradius">
	<p>Here's a stack of cards <code>without border radius</code>. </p>
</div>
0
Gomzy 11 Май 2016 в 11:35