html - CSS 框阴影 : Only apply to part of an element

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 伪选择器在没有额外标记的情况下实现这一点，但是 :after 不能很好地处理动画。

在 jsfiddle 上查看演示(仅限 Webkit，但您可以轻松地将其适配到 FF。不幸的是，IE9 就不行了)。