具有 css 边框半径的卡片堆栈效果不起作用答案

【问题标题】：card stack effect with css border radius is not working具有 css 边框半径的卡片堆栈效果不起作用
【发布时间】：2016-05-11 22:32:11
【问题描述】：

我想使用 css box-shadow 创建卡片堆栈，没有 border-radius 时它工作得很好，但是当我添加半径时，它会随着它的进展而失去圆度。请看下面的代码。

我想要这个结果

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>

【问题讨论】：

box-shadow 正在使用border-radius 检查小提琴我认为问题是因为box-shadow 的大小减小了border-radius 但如果你只有3 层那么你可以使用这个例子jsfiddle.net/victor_007/2zhjLdux/2
也许这个SO question 给出了一些答案。这是关于嵌入边界，但我猜半径变化的原因是一样的......

标签： html css

【解决方案1】：

如果你不需要为卡片效果使用盒子阴影，你可以使用 after 和 before 伪元素来获得对较低卡片边框半径的更多控制：

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>

【讨论】：

【解决方案2】：

试试这个：

    .card.noradius {
        border-radius: 6px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
}

【讨论】：

【解决方案3】：

我认为你需要这样的

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>

【讨论】：