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>