CSS：盒子右侧旋转阴影

Question

我是一名有用的助手，可以为您翻译文本。

我在左侧有一个固定的、100%高度的菜单，我需要在其右侧创建一个阴影效果，一段时间后该效果会消失。

请参见下图。

如何创建这个效果？

这里有一个fiddle示例：http://jsfiddle.net/52VtD/7787/

HTML：

<nav id="main-menu">
  <h1>Hello</h1>
  <a href="#">A</a>
  <a href="#">B</a>
  <a href="#">C</a>
  <a href="#">D</a>
</nav>

CSS：

#main-menu {
    width: 320px;
    height: 100%;
    top: 0;
    z-index: 1000;
    position: fixed;
    background-color: #b4bac1;
}

- Very Curious

---

如果你有psd文件，只需将阴影的数值复制并粘贴到任何阴影生成器中，肯定会有所帮助。 - Benjamin

@Benjamin 那是问题中比较简单的部分。难点在于阴影逐渐向垂直方向淡出。 - timo

我在谷歌搜索时找到了这个例子。http://jsfiddle.net/vBuxt/1/ 不完全符合你的要求，但我认为你可以根据自己的需求进行修改。 - timo

你的代码片段与这个问题无关...你是否链接了错误的代码片段？ - Paulie_D

抱歉，Fiddle已更新，之前的链接有误。 - Very Curious

Answer 1

你可以通过 CSS3 的 box-shadow 和 transform 属性来实现这一点。

在下面的示例中，.menuContainer 的伪元素应用了 box-shadow，并位于 .menu 元素下方，使用 CSS3 的 rotate() 变换属性旋转了 1°。

html,body {  /* This is only here to allow the menu to stretch to 100% */
    height: 100%;
    margin: 0;
}
.menuContainer {
    position: relative;    
    height: 100%;
    width: 100px;
}
.menuContainer::after {
    content: "";
    position: absolute;   
    z-index: 1; 
    top: -10px;
    bottom: 0;
    left: -7px;
    background: rgba(0,0,0,0.3);
    box-shadow: 10px 0 10px 0 rgba(0,0,0,0.3);
    width: 100px;    
    transform: rotate(1deg);
}
.menu {
    background: #f00;
    height: 100%;
    width: 100px;
    position: relative;
    z-index: 2;
}

<div class="menuContainer">
    <div class="menu"></div>
</div>

JSFiddle

- Chris Spittles

---

这不会在一段时间后逐渐消失，而是从顶部到底部始终保持不变。 - Very Curious

我认为你误读了问题。OP想要一个逐渐垂直淡出的阴影。没有提到任何动画。 - timo

此外，我认为动画并不是必需的...更重要的是，盒子阴影从底部到顶部的不透明度不一致。这是一个“角提升”阴影。 - Paulie_D

Answer 2

你可以使用伪元素来模拟，而不是使用 box-shadow，如下所示：

JSfiddle演示

CSS

#main-menu {
    width: 50px;
    height: 100%;
    top: 0;
    z-index: 1000;
    position: fixed;
    background-color: pink;
}

#main-menu:after {
    content:"";
    position: absolute;
    top:0;
    left:100%;
    height:100%;
    width:5%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 100%);
}

- Paulie_D

---

使用线性渐变时，如何使其边缘模糊？现在边缘很锐利。 - Very Curious

你可以尝试使用径向渐变，但是渐变不支持模糊。 - Paulie_D