CSS box-shadow：仅应用于元素的部分

Question

我有一个元素，想要在其中一个端点上产生阴影效果，就像这个Photoshop的图片一样：

我最接近的实现方式是使用这段HTML+CSS3代码：

那么，是否可以使阴影变得渐变，就像第一张图片一样？以下是我的代码：

box-shadow: 0px 0px  5px 1px rgba(0,0,0,.4);

- Nathan

---

请注意，除了浅蓝色条形图上的阴影之外，所有更改都是有意的。 - Nathan

Answer 1

确实可以只用CSS实现这种效果，但是CSS非常难理解：

.container {
  background-color: rgba(168,214,255,1);
  padding: 20px;
}
.tab {
  height: 50px;
  background-color: #4790CE;
  margin-bottom: 10px;
  border-radius: 20px;
  position: relative;
}

.tab.active {
  background-color: #63B6FF;
  border-radius: 20px 0 0 20px;
   box-shadow: 0 0 15px #3680BD;
}

.tab .shadow {
  position: absolute;
  top: -10px;
  left: 50px;
  right: -20px;
  bottom: -10px;
  border-radius: 20px;
  background-color: transparent;
  -webkit-border-image: -webkit-gradient(linear, left top, right top, color-stop(10%,rgba(168,214,255,0)), color-stop(80%,rgba(168,214,255,1))) 50 50 stretch;
  border-width: 10px 20px 10px 0;
}

你基本上使用border-image来遮盖投影。你可以通过 :after 伪选择器实现这一点而不需要额外的标记，但是 :after 在动画方面表现得不好。

在jsfiddle上查看演示（仅适用于Webkit，但您可以轻松地将其适应到FF。不幸的是，IE9将无法使用）。

- methodofaction

---

太棒了！我会开始为FF实现它。那一定是很多工作，非常感谢！ - Nathan

通过少量调整，您无需额外的标记，但可以使用:after伪类（Webkit）实现它。http://jsfiddle.net/HerrSerker/Zb5Qn/26/ - yunzen

Answer 2

我找到了另一个解决方案：

在两个 div 中放置，将选项卡水平切成两半，给它们添加盒子阴影和适当的边框半径，并稍微旋转它们，一个顺时针旋转，另一个逆时针旋转。

这里是链接：http://jsfiddle.net/Zb5Qn/32/ 使用 3D 变换更好，但只有 Webkit 支持。

---

HTML

<div class="container">
    <div class="tab">
        <div class="content">Tab3</div>
    </div>
    <div class="tab active">
        <div class="shadow1"></div>
        <div class="shadow2"></div>
        <div class="content">Tab2</div>
    </div>
    <div class="tab">
        <div class="content">Tab3</div>
    </div>
</div>​

---

CSS

.container {
  background-color: rgba(255,255,255,1);
  padding: 20px;
}
.tab {
    position: relative;
}
.tab .content{
  height: 50px;
  background-color: #4790CE;
  margin-bottom: 10px;
  border-radius: 20px;
  position: relative;
  line-height: 50px;
    padding-left: 50px;
}

.tab.active .content {
  background-color: #63B6FF;
  border-radius: 20px 0 0 20px;
    position:relative;

}
.tab .content {
    position:relative;
    z-index:2;
 background: red;   
}
.tab .shadow1 {
   box-shadow: 0px 0px  5px 1px rgba(0,0,0,.4);
    position:absolute;
    top: 0;
    left: 0;
    right:10px;
    bottom: 50%;
    border-radius: 20px 0 0 3px;
z-index: 1;

    -moz-transform: rotate(0.5deg);
-moz-transform-origin: 0 50%;
    -webkit-transform: rotate(0.5deg);
    -webkit-transform-origin: 0 50%;
    -o-transform: rotate(0.5deg);
    -o-transform-origin: 0 50%;
    -ms-transform: rotate(0.5deg);
    -ms-transform-origin: 0 50%;




}

.shadow2 {
   box-shadow: 0px 0px  5px 1px rgba(0,0,0,.4);
    position:absolute;
    top: 50%;
    left: 0;
    right:10px;
    bottom: 0;
    border-radius: 3px 0 0 20px;
    z-index: 1;
    -webkit-transform: rotate(-0.5deg);
-webkit-transform-origin: 0 50%;
    -moz-transform: rotate(-0.5deg);
-moz-transform-origin: 0 50%;
    -o-transform: rotate(-0.5deg);
    -o-transform-origin: 0 50%;
    -ms-transform: rotate(-0.5deg); 
    -ms-transform-origin: 0 50%;
}​

- yunzen

Answer 3

我用了一种不同的方法达到了您想要的效果。我给阴影div加了一点透视旋转。它也自动使用了“transform-style: preserve-3d;”属性，使其位于活动选项卡后面。这使得您在Photoshop上制作的效果得以实现。

只是想分享一下 ^^

（我编辑了Duopixel的jsfiddle代码）

.container {
  background-color: rgba(168,214,255,1);
  padding: 20px;
}
.tab {
  height: 50px;
  background-color: #4790CE;
  margin-bottom: 10px;
  border-radius: 20px;
  position: relative;
}

.tab.active {
  background-color: #63B6FF;
  border-radius: 20px 0 0 20px;
  transform: perspective(150px);
  transform-style: preserve-3d;  /*  this puts shadow behind the .tab.active without the need of z-index. */
}

.tab.active .shadow {
  position: absolute;
  top: 0px;    left: 0px;
  right: 0px;  bottom: 0px;
  border-radius: 20px;
  transform-origin: left center 0px;
  transform: rotateY(6deg);
  box-shadow: 0 0 10px 2px  #050d4b;
}

<div class="container">

  <div class="tab"></div>

  <div class="tab active">
    <div class="shadow"></div>
  </div>

  <div class="tab"></div>

</div>

- bekorn

Answer 4

你需要将元素分成两个部分 - 左侧带有阴影的一部分，只需要几个像素 - 可能不超过五个 - 其余部分将是所有不需要阴影的内容。

将元素分成两个部分后，你会得到类似于以下的一些 CSS：

#left-shadow
box-shadow: 0px 0px  5px 1px rgba(0,0,0,.4);

#right-no-shadow
box-shadow 0px 0px 0px 0px

- tjarratt

---

但仅仅这样还不能创建淡出效果。 - stefs

剪切边缘看起来不太好。像这样或者这样。 - Nathan

Answer 5

尝试这个 - box-shadow: -5px 0px 13px -3px #333;

-3px 是阴影扩散。将其降低以减少阴影区域。

- rzr

Answer 6

我认为可以通过创建比真实条形图更短的克隆条形图，将阴影应用于克隆条形图，并使用颜色渐变隐藏克隆条形图来实现。

虽然有些混乱，但我想不到其他方法了。

将它们彼此叠放（第一层在顶部，第三层在底部）。

编辑：该死，我不小心使用了错误的条形图层！它应该是一个没有投影的条形。对此我很抱歉！

我认为并没有一个“干净”的解决方案。

- stefs

---

嗯，我不太明白你的意思。当你说“把它们放在彼此上面”时，是指在顶部还是在y轴上更高？我想我还没有完全理解它们如何拟合在一起。你是建议我将第二层定位，以仅覆盖第一层的阴影吗？这不是一个坏主意，但这已经是一个相当混乱的布局了。考虑到我将使用jQuery对整个动画进行操作，我不确定是否会采用它。谢谢，这是一个好主意。如果没有更干净的方案发布，我会接受它。 - Nathan

彼此叠放。第三层提供了投影，第二层让投影逐渐消失，而第一层（也是最上面的一层）显示内容。这种方法只能在纯色背景上使用，且不太灵活。 - stefs

看起来图片链接坏了，你能再上传一次吗？ - Tim Post

抱歉，我不认为我还有那张图片。此外，我的解决方案很可能已经失效了 - 如果您不想要这个损坏的图片链接，请随意删除整个答案。 - stefs