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

Question

我有一个元素，我想在一端有一个阴影口音，像这样（来自Photoshop）：

我最接近的是这样的（HTML + CSS3）：

那么，是否有可能使阴影褪色，就像在第一张照片中一样？这是我的代码：

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

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伪选择器在没有额外标记的情况下实现这一点，但是：之后对动画不起作用。

在jsfiddle上查看演示（仅限Webkit，但您可以轻松地将其调整为FF。不幸的是，IE9会运气不好）。

Answer 2

我找到了其他一些解决方案：

将两个div放入其中，将标签水平切成两半，给它们框阴影和适当的边框半径，然后稍微旋转它们，另一个CW旋转到另一个CCW。

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%;
}​

Answer 3

我也以不同的方式达到了你想要的效果。我给了影子div一点Run。它还自动支持具有rotation with perspective属性的active-tab。这使你对photoshop产生了影响。

只是想分享^^

（我编辑了Duopixel's jsfiddle code）

transform-style: preserve-3d;

.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;
}

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

Answer 5

我认为可以通过在真实条形下方创建较短长度的条形克隆，将阴影应用于克隆并隐藏克隆条形，并将颜色过渡为透明。

非常混乱，但我想不出任何其他方式。

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

编辑：该死的，我意外地在第一层使用了错误的栏！它应该是一个没有投影的条形。对不起！

我认为没有 clean 解决方案。

Answer 6

试试这个 - box-shadow：-5px 0px 13px -3px＃333;

-3px是阴影传播。降低它以减少阴影区域。