如何使用CSS实现比普通阴影更加立体的阴影效果！
<p><span style="font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; font-size: 14px; background-color: rgb(255, 255, 255);">如何使用CSS实现更加立体的阴影效果？下面本篇文章给大家聊聊CSS 阴影进阶，介绍一下巧用使用CSS实现立体阴影效果的方法，希望对大家有所帮助！</span></p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"><br/></p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"></p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">CSS 阴影的存在，让物体看上去更加有型立体。【推荐学习：<a href="https://www.php.cn/course/list/12.html" target="_blank" style="margin: 0px; padding: 0px; color: rgb(61, 167, 13); text-decoration-line: none !important;">css视频教程</a>】</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">然而，在最简单的阴影使用之上，我们可以实现更多有意思且更加立体的阴影效果。</p><h2 style="margin: 0px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"><strong style="margin: 0px; padding: 0px;">CSS 阴影基础</strong></h2><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">CSS 中，明面上可以实现阴影的有三个属性：</p><ul style="padding: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p>box-shadow - 盒阴影</p></li><li><p>text-shadow - 文字阴影</p></li><li><p>filter: drop-shaodw() - 滤镜内的阴影</p></li></ul><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">关于它们的基础语法和使用就不过多描述，这一部分大家可以先在 MDN 补齐，贴几张图快速复习一下：</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">box-shadow - 盒阴影：</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"></p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">text-shadow - 文字阴影：</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"></p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">filter: drop-shaodw() - 滤镜内的阴影：</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"></p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">基本上 3 种阴影大同小异，需要注意的就是：</p><ul style="padding: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p><code style="margin: 0px; padding: 2px 4px; font-size: 14.4px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px;">box-shadow</code> 还区分内阴影，内阴影使用关键字 <code style="margin: 0px; padding: 2px 4px; font-size: 14.4px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px;">inset</code> 进行描述；</p></li><li><p><code style="margin: 0px; padding: 2px 4px; font-size: 14.4px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px;">box-shadow</code> 多一个阴影扩散半径参数。</p></li></ul><h3 style="margin: 0px; padding: 0px; font-weight: 400; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"><strong style="margin: 0px; padding: 0px;">长投影</strong></h3><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">上面提到了通过多层阴影叠加实现文字的立体阴影。运用在 div 这些容器上也是可以的。当然这里还有一种挺有意思的方法。假设我们，有一个矩形元素，希望给他添加一个长投影，像下面这样：</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"></p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">要生成这种长投影，刚刚说的叠加多层阴影可以，再就是借助元素的两个伪元素，其实上面的图是这样的：</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"></p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">关键点在于，我们通过对两个伪元素的 <code style="margin: 0px; padding: 2px 4px; font-size: 14.4px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px;">transform: skew()</code> 变换以及从实色到透明色的背景色变化，实现了长投影的效果：</p><blockquote style="margin: 0.8em 0px; padding: 10.5px 21px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color: rgb(245, 245, 245); border-left: 4px solid rgb(204, 204, 204); color: rgb(85, 85, 85); font-size: 14px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal;"><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); font-size: 16px; box-sizing: border-box; border-radius: 8px;">CodePen Demo -- 线性渐变模拟长阴影</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); font-size: 16px; box-sizing: border-box; border-radius: 8px;">https://codepen.io/Chokcoco/pen/qJvVGy</p></blockquote><h3 style="margin: 0px; padding: 0px; font-weight: 400; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">立体投影</h3><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">好，我们继续。下一个主题是<strong style="margin: 0px; padding: 0px;">立体投影</strong>。</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">这个说法很奇怪，阴影的出现，本就是为了让原本的元素看起来更加的立体，那这里所谓的立体投影，是个怎么立体法？</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">这里所谓的立体投影，并不一定是使用了 <code style="margin: 0px; padding: 2px 4px; font-size: 14.4px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px;">box-shadow</code>、<code style="margin: 0px; padding: 2px 4px; font-size: 14.4px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px;">text-shadow</code> 或者 <code style="margin: 0px; padding: 2px 4px; font-size: 14.4px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px;">drop-shadow</code>，而是我们使用其他元素或者属性模拟元素的阴影。而这样做的目的，是为了能够突破 <code style="margin: 0px; padding: 2px 4px; font-size: 14.4px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px;">box-shadow</code> 这类元素的一些定位局限。<strong style="margin: 0px; padding: 0px;">让阴影的位置、大小、模糊度可以更加的灵活</strong>。</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">OK，让我们来看看，这样一个元素，我们希望通过自定义阴影的位置，让它更加立体：</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"></p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">上图 div 只是带了一个非常浅的 <code style="margin: 0px; padding: 2px 4px; font-size: 14.4px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px;">box-shadow</code> ，看上去和立体没什么关系，接下来，我们通过 div 的伪元素，给它生成一个和原图边角形状类似的图形，再通过 transform 位移一下，可能是这样：</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"></p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">OK，最后对这个用伪元素生成的元素进行一些虚化效果（filter或者box-shadow都可以），就可以实现一个边角看起来像被撕开的立体效果：</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"></p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">代码非常简单，伪 CSS 代码示意如下：</p><table class="wcn_c_table" cellpadding="0" cellspacing="0" width="760"><tbody style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><tr style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;" class="firstRow"><td class="gutter" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 0px !important; border-radius: 4px 0px 0px 4px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(175, 175, 175) !important; user-select: none !important;" width="NaN"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">1</p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">2</p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">3</p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">4</p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">5</p><p class="line number6 index5 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">6</p><p class="line number7 index6 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">7</p><p class="line number8 index7 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">8</p><p class="line number9 index8 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">9</p><p class="line number10 index9 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">10</p><p class="line number11 index10 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">11</p><p class="line number12 index11 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">12</p><p class="line number13 index12 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">13</p><p class="line number14 index13 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">14</p><p class="line number15 index14 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">15</p><p class="line number16 index15 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">16</p><p class="line number17 index16 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">17</p><p class="line number18 index17 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">18</p><p class="line number19 index18 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">19</p><p class="line number20 index19 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">20</p><p class="line number21 index20 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">21</p></td><td class="code" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); word-break: break-all; margin: 0px !important; border-radius: 0px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important;" width="712"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">div {</code></p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">position: relative;</code></p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">width: 600px;</code></p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">height: 100px;</code></p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">background: hsl(48, 100%, 50%);</code></p><p class="line number6 index5 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">border-radius: 20px;</code></p><p class="line number7 index6 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}</code></p><p class="line number8 index7 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"> </p><p class="line number9 index8 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">div::before {</code></p><p class="line number10 index9 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">content: </code><code class="php string" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"></code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">;</code></p><p class="line number11 index10 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">position: absolute;</code></p><p class="line number12 index11 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">top: 50%;</code></p><p class="line number13 index12 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">left: 5%;</code></p><p class="line number14 index13 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">right: 5%;</code></p><p class="line number15 index14 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">bottom: 0;</code></p><p class="line number16 index15 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">border-radius: 10px;</code></p><p class="line number17 index16 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">background: hsl(48, 100%, 20%);</code></p><p class="line number18 index17 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">transform: translate(0, -15%) rotate(-4deg);</code></p><p class="line number19 index18 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">transform-origin: center center;</code></p><p class="line number20 index19 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">box-shadow: 0 0 20px 15px hsl(48, 100%, 20%);</code></p><p class="line number21 index20 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}</code></p></td></tr></tbody></table><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">所以总结一下：</p><ul style="padding: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p>立体投影的关键点在于利于伪元素生成一个大小与父元素相近的元素，然后对其进行 rotate 以及定位到合适位置，再赋于阴影操作</p></li><li><p>颜色的运用也很重要，阴影的颜色通常比本身颜色要更深，这里使用 hsl 表示颜色更容易操作，l 控制颜色的明暗度</p></li></ul><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">还有其他很多场景，都可以用类似的技巧实现：</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"></p><blockquote style="margin: 0.8em 0px; padding: 10.5px 21px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color: rgb(245, 245, 245); border-left: 4px solid rgb(204, 204, 204); color: rgb(85, 85, 85); font-size: 14px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal;"><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); font-size: 16px; box-sizing: border-box; border-radius: 8px;">详细完整的代码，你可以戳这里：CodePen Demo -- 立体投影</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); font-size: 16px; box-sizing: border-box; border-radius: 8px;">https://codepen.io/Chokcoco/pen/LgdRKE?editors=1100</p></blockquote><h3 style="margin: 0px; padding: 0px; font-weight: 400; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">浮雕阴影</h3><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">还有一类立体效果的阴影就是浮雕阴影，它的本质还是 <code style="margin: 0px; padding: 2px 4px; font-size: 14.4px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px;">box-shadow</code> 和 <code style="margin: 0px; padding: 2px 4px; font-size: 14.4px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px;">text-shadow</code>，只是需要控制好颜色的配合以及内外阴影的一起使用。核心就是 2 点：</p><ul style="padding: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p style="margin-top: 15px; margin-bottom: 15px; padding-left: 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; border-radius: 8px; padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important;">背景色与内容（文本或者盒子颜色）一致</p></li><li><p style="margin-top: 15px; margin-bottom: 15px; padding-left: 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; border-radius: 8px; padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important;"><strong style="margin: 0px; padding: 0px;">使用两个相反的方向，使用两组对比明显的颜色值，来实现凹凸效果</strong>。</p></li></ul><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">首先，我们来看一个文字版的浮雕效果。</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">先实现一个凸起的效果，我们需要实现一个背景色和文字色一样的文字：</p><table class="wcn_c_table" cellpadding="0" cellspacing="0" width="760"><tbody style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><tr style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;" class="firstRow"><td class="gutter" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 0px !important; border-radius: 4px 0px 0px 4px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(175, 175, 175) !important; user-select: none !important;" width="NaN"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">1</p></td><td class="code" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); word-break: break-all; margin: 0px !important; border-radius: 0px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important;" width="719"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><div>浮雕阴影</div></code></p></td></tr></tbody></table><table class="wcn_c_table" cellpadding="0" cellspacing="0" width="760"><tbody style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><tr style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;" class="firstRow"><td class="gutter" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 0px !important; border-radius: 4px 0px 0px 4px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(175, 175, 175) !important; user-select: none !important;" width="NaN"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">1</p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">2</p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">3</p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">4</p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">5</p><p class="line number6 index5 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">6</p></td><td class="code" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); word-break: break-all; margin: 0px !important; border-radius: 0px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important;" width="719"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">body {</code></p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">background: #999;</code></p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}</code></p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">div {</code></p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">color: #999;</code></p><p class="line number6 index5 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}</code></p></td></tr></tbody></table><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">效果如下，由于背景色和文字色的颜色一样，所以我们什么都看不到。</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"></p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">不过没事，我们给文字添加一个 <code style="margin: 0px; padding: 2px 4px; font-size: 14.4px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px;">1px</code> x、y 方向的黑色阴影：</p><table class="wcn_c_table" cellpadding="0" cellspacing="0" width="760"><tbody style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><tr style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;" class="firstRow"><td class="gutter" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 0px !important; border-radius: 4px 0px 0px 4px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(175, 175, 175) !important; user-select: none !important;" width="NaN"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">1</p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">2</p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">3</p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">4</p></td><td class="code" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); word-break: break-all; margin: 0px !important; border-radius: 0px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important;" width="719"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">div {</code></p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">color: #999;</code></p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">text-shadow: 1px 1px 1px #000;</code></p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}</code></p></td></tr></tbody></table><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">效果如下：</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"></p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">有点感觉了，再反向，也就是 <code style="margin: 0px; padding: 2px 4px; font-size: 14.4px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px;">-1px</code> x、y 方向添加一个黑色相对，也就白色的阴影：</p><table class="wcn_c_table" cellpadding="0" cellspacing="0" width="760"><tbody style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><tr style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;" class="firstRow"><td class="gutter" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 0px !important; border-radius: 4px 0px 0px 4px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(175, 175, 175) !important; user-select: none !important;" width="NaN"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">1</p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">2</p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">3</p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">4</p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">5</p><p class="line number6 index5 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">6</p></td><td class="code" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); word-break: break-all; margin: 0px !important; border-radius: 0px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important;" width="719"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">div {</code></p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">color: #999;</code></p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">text-shadow: </code></p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">1px 1px 1px #000, </code></p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">-1px -1px 1px #fff;</code></p><p class="line number6 index5 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}</code></p></td></tr></tbody></table><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">效果如下，这样我们就得到了一个凸起质感的浮雕阴影：</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"></p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">如果我们把颜色对调一下呢？</p><table class="wcn_c_table" cellpadding="0" cellspacing="0" width="760"><tbody style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><tr style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;" class="firstRow"><td class="gutter" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 0px !important; border-radius: 4px 0px 0px 4px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(175, 175, 175) !important; user-select: none !important;" width="NaN"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">1</p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">2</p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">3</p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">4</p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">5</p><p class="line number6 index5 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">6</p></td><td class="code" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); word-break: break-all; margin: 0px !important; border-radius: 0px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important;" width="719"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">div {</code></p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">color: #999;</code></p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">text-shadow: </code></p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">1px 1px 1px #fff, </code></p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">-1px -1px 1px #000;</code></p><p class="line number6 index5 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}</code></p></td></tr></tbody></table><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">就能很轻松的得到凹下质感的浮雕阴影：</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"></p><blockquote style="margin: 0.8em 0px; padding: 10.5px 21px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color: rgb(245, 245, 245); border-left: 4px solid rgb(204, 204, 204); color: rgb(85, 85, 85); font-size: 14px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal;"><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); font-size: 16px; box-sizing: border-box; border-radius: 8px;">上述 DEMO 的完整代码：CodePen Demo - Embossed Shadow</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); font-size: 16px; box-sizing: border-box; border-radius: 8px;">https://codepen.io/Chokcoco/pen/yLPmMXM</p></blockquote><h3 style="margin: 0px; padding: 0px; font-weight: 400; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">新拟态风格阴影</h3><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">我们将运用在文字上的技巧，扩展延伸到容器上，就能得到最近比较火的拟态风格阴影，其原理也是大同小异。</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">两个阴影，使用两个相反的方向，使用两组对比明显的颜色值，来实现凹凸效果。<strong style="margin: 0px; padding: 0px;">与文字不同的是，这里的凹效果，我们需要使用盒子的内阴影实现</strong>。</p><table class="wcn_c_table" cellpadding="0" cellspacing="0" width="760"><tbody style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><tr style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;" class="firstRow"><td class="gutter" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 0px !important; border-radius: 4px 0px 0px 4px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(175, 175, 175) !important; user-select: none !important;" width="NaN"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">1</p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">2</p></td><td class="code" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); word-break: break-all; margin: 0px !important; border-radius: 0px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important;" width="719"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><div>浮雕阴影</div></code></p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><div>浮雕阴影</div></code></p></td></tr></tbody></table><table class="wcn_c_table" cellpadding="0" cellspacing="0" width="760"><tbody style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><tr style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;" class="firstRow"><td class="gutter" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 0px !important; border-radius: 4px 0px 0px 4px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(175, 175, 175) !important; user-select: none !important;" width="NaN"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">1</p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">2</p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">3</p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">4</p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">5</p><p class="line number6 index5 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">6</p><p class="line number7 index6 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">7</p><p class="line number8 index7 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">8</p><p class="line number9 index8 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">9</p><p class="line number10 index9 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">10</p><p class="line number11 index10 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">11</p><p class="line number12 index11 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">12</p><p class="line number13 index12 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">13</p><p class="line number14 index13 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">14</p><p class="line number15 index14 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">15</p></td><td class="code" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); word-break: break-all; margin: 0px !important; border-radius: 0px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important;" width="712"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">div {</code></p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">width: 120px;</code></p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">height: 120px;</code></p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">background: #e9ecef;</code></p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">color: #333;</code></p><p class="line number6 index5 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">box-shadow:</code></p><p class="line number7 index6 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">7px 7px 12px rgba(0, 0, 0, .4),</code></p><p class="line number8 index7 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">-7px -7px 12px rgba(255, 255, 255, .9);</code></p><p class="line number9 index8 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}</code></p><p class="line number10 index9 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"> </p><p class="line number11 index10 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">div:nth-child(2) {</code></p><p class="line number12 index11 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">box-shadow:</code></p><p class="line number13 index12 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">inset -7px -7px 12px rgba(255, 255, 255, .9),</code></p><p class="line number14 index13 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">inset 7px 7px 12px rgba(0, 0, 0, .4);</code></p><p class="line number15 index14 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}</code></p></td></tr></tbody></table><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">这样，就可以得到拟态风格的按钮，如下图所示，左凸右凹：</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"></p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">再通过一个简单的过渡，就可以实现整个点击的交互：</p><table class="wcn_c_table" cellpadding="0" cellspacing="0" width="760"><tbody style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><tr style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;" class="firstRow"><td class="gutter" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 0px !important; border-radius: 4px 0px 0px 4px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(175, 175, 175) !important; user-select: none !important;" width="NaN"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">1</p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">2</p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">3</p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">4</p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">5</p><p class="line number6 index5 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">6</p><p class="line number7 index6 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">7</p><p class="line number8 index7 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">8</p><p class="line number9 index8 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">9</p><p class="line number10 index9 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">10</p><p class="line number11 index10 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">11</p><p class="line number12 index11 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">12</p><p class="line number13 index12 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">13</p><p class="line number14 index13 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">14</p><p class="line number15 index14 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">15</p><p class="line number16 index15 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">16</p></td><td class="code" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); word-break: break-all; margin: 0px !important; border-radius: 0px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important;" width="712"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">div {</code></p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">transition: .2s all;</code></p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">box-shadow:</code></p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">7px 7px 12px rgba(0, 0, 0, .4),</code></p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">-7px -7px 12px rgba(255, 255, 255, .9),</code></p><p class="line number6 index5 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">inset 0 0 0x rgba(255, 255, 255, .9),</code></p><p class="line number7 index6 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">inset 0 0 0 rgba(0, 0, 0, .4);</code></p><p class="line number8 index7 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code> </p><p class="line number9 index8 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">&:active {</code></p><p class="line number10 index9 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">box-shadow:</code></p><p class="line number11 index10 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">0 0 0 rgba(0, 0, 0, .4),</code></p><p class="line number12 index11 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">0 0 0 rgba(255, 255, 255, .9),</code></p><p class="line number13 index12 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">inset -7px -7px 12px rgba(255, 255, 255, .9),</code></p><p class="line number14 index13 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">inset 7px 7px 12px rgba(0, 0, 0, .4);</code></p><p class="line number15 index14 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}</code></p><p class="line number16 index15 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}</code></p></td></tr></tbody></table><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">看看效果：</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"></p><h3 style="margin: 0px; padding: 0px; font-weight: 400; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">文字立体投影 / 文字长阴影</h3><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">上面的立体效果在文字上就完全不适用了，所以对待文字的立体阴影效果，还需要另辟蹊径。</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">正常而言，我们使用 text-shadow 来生成文字阴影，像这样：</p><table class="wcn_c_table" cellpadding="0" cellspacing="0" width="760"><tbody style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><tr style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;" class="firstRow"><td class="gutter" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 0px !important; border-radius: 4px 0px 0px 4px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(175, 175, 175) !important; user-select: none !important;" width="NaN"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">1</p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">2</p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">3</p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">4</p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">5</p></td><td class="code" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); word-break: break-all; margin: 0px !important; border-radius: 0px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important;" width="719"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><div> Txt Shadow</div></code></p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">-----</code></p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">div {</code></p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">text-shadow: 6px 6px 3px hsla(14, 100%, 30%, 1);</code></p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}</code></p></td></tr></tbody></table><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"></p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">嗯，挺好的，就是不够立体。那么要做到立体文字阴影，最常见的方法就是使用多层文字阴影叠加。</p><blockquote style="margin: 0.8em 0px; padding: 10.5px 21px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color: rgb(245, 245, 245); border-left: 4px solid rgb(204, 204, 204); color: rgb(85, 85, 85); font-size: 14px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal;">Tips：和 <code style="margin: 0px; padding: 2px 4px; font-size: 12.6px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px;">box-shadow</code> 一样，<code style="margin: 0px; padding: 2px 4px; font-size: 12.6px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px;">text-shadow</code> 是可以叠加多层的！但是对于单个元素而言， <code style="margin: 0px; padding: 2px 4px; font-size: 12.6px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px;">drop-shadow</code> 的话就只能是一层。</blockquote><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">好，上面的文字，我们试着叠加个 50 层文字阴影试一下。额，50 层手写，其实很快的~</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">好吧，手写真的太慢了，还容易出错，所以这里我们需要借助一下 SASS/LESS 帮忙，写一个生成 50 层阴影的 <code style="margin: 0px; padding: 2px 4px; font-size: 14.4px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px;">function</code> 就好，我们每向右和向下偏移 1px，生成一层 text-shadow：</p><table class="wcn_c_table" cellpadding="0" cellspacing="0" width="760"><tbody style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><tr style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;" class="firstRow"><td class="gutter" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 0px !important; border-radius: 4px 0px 0px 4px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(175, 175, 175) !important; user-select: none !important;" width="NaN"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">1</p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">2</p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">3</p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">4</p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">5</p><p class="line number6 index5 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">6</p><p class="line number7 index6 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">7</p><p class="line number8 index7 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">8</p><p class="line number9 index8 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">9</p><p class="line number10 index9 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">10</p><p class="line number11 index10 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">11</p><p class="line number12 index11 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">12</p><p class="line number13 index12 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">13</p></td><td class="code" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); word-break: break-all; margin: 0px !important; border-radius: 0px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important;" width="712"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">@</code><code class="php keyword" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-weight: bold !important; min-height: auto !important;">function</code> <code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">makeLongShadow(</code><code class="php variable" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">$color</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">) {</code></p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php variable" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">$val</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">: 0px 0px </code><code class="php variable" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">$color</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">;</code></p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"> </p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">@</code><code class="php keyword" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-weight: bold !important; min-height: auto !important;">for</code> <code class="php variable" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">$i</code> <code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">from 1 through 50 {</code></p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php variable" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">$val</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">: #{</code><code class="php variable" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">$val</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}, #{</code><code class="php variable" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">$i</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}px #{</code><code class="php variable" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">$i</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}px #{</code><code class="php variable" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">$color</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">};</code></p><p class="line number6 index5 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}</code></p><p class="line number7 index6 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"> </p><p class="line number8 index7 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">@</code><code class="php keyword" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-weight: bold !important; min-height: auto !important;">return</code> <code class="php variable" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">$val</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">;</code></p><p class="line number9 index8 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}</code></p><p class="line number10 index9 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"> </p><p class="line number11 index10 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">div {</code></p><p class="line number12 index11 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">text-shadow: makeLongShadow(hsl(14, 100%, 30%));</code></p><p class="line number13 index12 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}</code></p></td></tr></tbody></table><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">上面的 SCSS 代码。经过编译后，就会生成如下 CSS：</p><table class="wcn_c_table" cellpadding="0" cellspacing="0" width="760"><tbody style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><tr style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;" class="firstRow"><td class="gutter" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 0px !important; border-radius: 4px 0px 0px 4px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(175, 175, 175) !important; user-select: none !important;" width="NaN"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">1</p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">2</p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">3</p></td><td class="code" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); word-break: break-all; margin: 0px !important; border-radius: 0px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important;" width="719"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">div {</code></p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">text-shadow: 0px 0px #992400, 1px 1px #992400, 2px 2px #992400, 3px 3px #992400, 4px 4px #992400, 5px 5px #992400, 6px 6px #992400, 7px 7px #992400, 8px 8px #992400, 9px 9px #992400, 10px 10px #992400, 11px 11px #992400, 12px 12px #992400, 13px 13px #992400, 14px 14px #992400, 15px 15px #992400, 16px 16px #992400, 17px 17px #992400, 18px 18px #992400, 19px 19px #992400, 20px 20px #992400, 21px 21px #992400, 22px 22px #992400, 23px 23px #992400, 24px 24px #992400, 25px 25px #992400, 26px 26px #992400, 27px 27px #992400, 28px 28px #992400, 29px 29px #992400, 30px 30px #992400, 31px 31px #992400, 32px 32px #992400, 33px 33px #992400, 34px 34px #992400, 35px 35px #992400, 36px 36px #992400, 37px 37px #992400, 38px 38px #992400, 39px 39px #992400, 40px 40px #992400, 41px 41px #992400, 42px 42px #992400, 43px 43px #992400, 44px 44px #992400, 45px 45px #992400, 46px 46px #992400, 47px 47px #992400, 48px 48px #992400, 49px 49px #992400, 50px 50px #992400;</code></p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}</code></p></td></tr></tbody></table><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">看看效果：</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"></p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">额，很不错，很立体。但是，就是丑，而且说不上来的奇怪。</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">问题出在哪里呢，阴影其实是存在明暗度和透明度的变化的，所以，对于渐进的每一层文字阴影，明暗度和透明度应该都是不断变化的。这个需求，SASS 可以很好的实现，下面是两个 SASS 颜色函数：</p><ul style="padding: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p><code style="margin: 0px; padding: 2px 4px; font-size: 14.4px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px;">fade-out</code> 改变颜色的透明度，让颜色更加透明</p></li><li><p><code style="margin: 0px; padding: 2px 4px; font-size: 14.4px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px;">desaturate</code> 改变颜色的饱和度值，让颜色更少的饱和</p></li></ul><blockquote style="margin: 0.8em 0px; padding: 10.5px 21px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color: rgb(245, 245, 245); border-left: 4px solid rgb(204, 204, 204); color: rgb(85, 85, 85); font-size: 14px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal;">关于 SASS 颜色函数，可以看看这里：<a href="https://www.w3cplus.com/preprocessor/sass-color-function.html" target="_blank" style="margin: 0px; padding: 0px; color: rgb(61, 167, 13); text-decoration-line: none !important;">Sass基础—颜色函数</a></blockquote><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">我们使用上面两个 SASS 颜色函数修改一下我们的 CSS 代码，主要是修改上面的 <code style="margin: 0px; padding: 2px 4px; font-size: 14.4px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px;">makeLongShadow</code> function 函数：</p><table class="wcn_c_table" cellpadding="0" cellspacing="0" width="760"><tbody style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><tr style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;" class="firstRow"><td class="gutter" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 0px !important; border-radius: 4px 0px 0px 4px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(175, 175, 175) !important; user-select: none !important;" width="NaN"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">1</p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">2</p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">3</p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">4</p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">5</p><p class="line number6 index5 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">6</p><p class="line number7 index6 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">7</p><p class="line number8 index7 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">8</p><p class="line number9 index8 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">9</p><p class="line number10 index9 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">10</p></td><td class="code" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); word-break: break-all; margin: 0px !important; border-radius: 0px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important;" width="712"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">@</code><code class="php keyword" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-weight: bold !important; min-height: auto !important;">function</code> <code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">makelongrightshadow(</code><code class="php variable" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">$color</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">) {</code></p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php variable" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">$val</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">: 0px 0px </code><code class="php variable" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">$color</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">;</code></p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"> </p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">@</code><code class="php keyword" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-weight: bold !important; min-height: auto !important;">for</code> <code class="php variable" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">$i</code> <code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">from 1 through 50 {</code></p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php variable" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">$color</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">: fade-out(desaturate(</code><code class="php variable" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">$color</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">, 1%), .02);</code></p><p class="line number6 index5 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php variable" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">$val</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">: #{</code><code class="php variable" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">$val</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}, #{</code><code class="php variable" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">$i</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}px #{</code><code class="php variable" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">$i</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}px #{</code><code class="php variable" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">$color</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">};</code></p><p class="line number7 index6 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}</code></p><p class="line number8 index7 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"> </p><p class="line number9 index8 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">@</code><code class="php keyword" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-weight: bold !important; min-height: auto !important;">return</code> <code class="php variable" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">$val</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">;</code></p><p class="line number10 index9 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}</code></p></td></tr></tbody></table><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">好，看看最终效果：</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"></p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">嗯，大功告成，这次顺眼了很多~</p><blockquote style="margin: 0.8em 0px; padding: 10.5px 21px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color: rgb(245, 245, 245); border-left: 4px solid rgb(204, 204, 204); color: rgb(85, 85, 85); font-size: 14px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal;"><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); font-size: 16px; box-sizing: border-box; border-radius: 8px;">详细完整的代码，你可以戳这里：CodePen Demo -- 立体文字阴影</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); font-size: 16px; box-sizing: border-box; border-radius: 8px;">https://codepen.io/Chokcoco/pen/JmgNNa</p></blockquote><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">当然，使用 CSS 生成立体文字阴影的方法还有很多，下面再贴出一例，使用了<strong style="margin: 0px; padding: 0px;">透明色叠加底色的多重线性渐变</strong>实现的文字立体阴影，感兴趣的同学可以去看看具体实现：</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"></p><blockquote style="margin: 0.8em 0px; padding: 10.5px 21px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color: rgb(245, 245, 245); border-left: 4px solid rgb(204, 204, 204); color: rgb(85, 85, 85); font-size: 14px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal;"><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); font-size: 16px; box-sizing: border-box; border-radius: 8px;">详细完整的代码，你可以戳这里：CodePen Demo -- 线性渐变配合阴影实现条纹立体阴影条纹字</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); font-size: 16px; box-sizing: border-box; border-radius: 8px;">https://codepen.io/Chokcoco/pen/XxQJEB?editors=1100</p></blockquote><p><br/></p><link rel="stylesheet" href="//www.zhidianyun.cn/source/plugin/wcn_editor/public/wcn_editor_fit.css?v134_TZ8" id="wcn_editor_css"/>
页:
[1]