box-shadow属性为tab栏添加阴影

box-shadow为tab栏添加阴影

因为要求让tab栏与页面body中的content有个间距，所以最好的方法就是给tab栏添加阴影效果，需要使用box-shadow属性。

box-shadow的语法如下：

box-shadow：x-shadow  y-shadow  blur  spread  color  inset;

参数说明：

• x-shadow：设置对象的阴影水平偏移值，单位可以是px、em或百分比等，允许负值
• y-shadow：设置对象的阴影垂直偏移值，单位可以是px、em或百分比等，允许负值
• blur：用于设置边框阴影半径大小
• spread：扩展半径，设置阴影的尺寸；这个参数可选，缺省时值为0
• color：设置阴影的颜色
• inset：这个参数默认不设置。默认情况下为外阴影，inset表示内阴影

代码如下所示：

<div class="layui-tab layui-tab-card" lay-filter="docDemoTabBrief" lay-allowClose="true">
    <ul class="layui-tab-title" style="background-color:#e2e2e2; box-shadow:0px 1px 1px #888888"></ul>
    <div class="layui-tab-content"></div>
</div>