<p class="zw">通过使用<code>box-shadow</code>可以实现立体效果。<code>box-shadow</code>的语法很简单，第一个值是水平偏移，第二个值是垂直偏移，第三个值是模糊半径，第四个值是RGB颜色。</p> <pre class="代码无行号"><code>.item__description { box-shadow : 0 1px 3px rgba(0,0,0,.8); }</code></pre> <p class="zw">除非是头顶烈日，否则任何事物都会有多个阴影。通过设置多重<code>box-shadow</code>，可以实现更立体的三维效果。多个阴影的值通过逗号分隔。</p> <pre class="代码无行号"><code>.item__description { box-shadow : 0 1px 1px rgba(0,0,0,.8), 0 6px 9px rgba(0,0,0,.4); }</code></pre> <p class="zw">在自然环境下，事物会受到来自四面八方的光线的照射，所以你可以将<code>box-shadow</code>的水平和垂直偏移设置成正值或负值，来将阴影投向任何方位。</p> <pre class="代码无行号"><code>.item__description { box-shadow : 0 -1px 1px rgba(0,0,0,.8), 0 -6px 9px rgba(0,0,0,.4); }</code></pre> </blockquote> <p class="zw">对于单个半径，它的值是顺时针设置的：左上（top-left）、右上（top-right）、右下（bottom-right）、左下（bottom-left）。如果我们省略了左下（bottom-left），右上（top-right） 也会被省略。要单独实现椭圆的各个边角，可以分别设置每个角的水平和垂直半径，如下所示。</p> <pre class="代码无行号"><code>.h-card { border-radius: 5px 30px 80px 40px / 30px 60px 40px 100px; }</code></pre>
