前天花了一天的时候制作了一款淘宝系统自带导航(试用版)软件，现在看来，艺灵只想说一个字：坑！

为什么这样说呢？这个得从淘宝这逗逼说起了。

艺灵将淘宝店铺默认导航分为五个区块，分别称之为：主导航区、主导航二级栏目区、所有分类区、所有分类二级栏目区、所有分类三级栏目区。具体布局如下图： (注：个人分法，如有意见，请发表在下方评论区中。)

下面我们来写一个css3特效，效果是:鼠标滑过主导航栏目时，右边框变宽且变色和变样式。

在写特效前，我们需要知道这个右边框的样式名是什么。拿出我们的装x神器--Chrome浏览器，f12一下你就知道。原来这个右边框的样式名为：.skin-box-bd .menu-list .menu，参照图： 然后我们就可以写特效了。

/*主导航边框动画*/
.skin-box-bd .menu-list .menu{-webkit-transition:0.5s ease-out;transition: 0.5s ease-out;}
.skin-box-bd .menu-list li.menu:hover,.skin-box-bd .menu-list .menu-selected{border-width:0px 5px 0px 0px;border-style:none dotted none none;border-color:#cccccc #ffffff #cccccc #cccccc}
/*end 主导航边框动画*/
/*这个是箭头旋转特效，后面会用到*/
.skin-box-bd .menu-list li.menu-selected .link .popup-icon,.skin-box-bd .menu-list li.menu-hover .link i{background-position:0px -50px;-webkit-transform:rotate(60deg);transform:rotate(60deg);}
/*end 这个是箭头旋转特效，后面会用到*/

写完代码后，我们复制代码进入后台，找到导航栏并保存进去。注意，坑点就在这里。仔细看下面的gif动态图:

有没有发现当我再次点击开的时候已经少了很多代码？！(注意：注释本身就会被清除。)其实少的代码就是上面黄色高亮的代码。仔细检查会发现这串代码并没有什么问题，那么为什么会被过滤呢？这不由得让我想起前年写的一篇文章：宝贝描述背景与文字分离经过反复测试后得出一种修复方案，源码如下：

/*主导航边框动画*/
.skin-box-bd .menu-list .menu{-webkit-transition:0.5s ease-out;transition: 0.5s ease-out;}
/*这个是箭头旋转特效，后面会用到*/
.skin-box-bd .menu-list li.menu-selected .link .popup-icon,.skin-box-bd .menu-list li.menu-hover .link i{background-position:0px -50px;-webkit-transform:rotate(60deg);transform:rotate(60deg);}
/*end 这个是箭头旋转特效，后面会用到*/
.skin-box-bd .menu-list li.menu:hover,.skin-box-bd .menu-list .menu-selected{border-width:0px 5px 0px 0px;border-style:none dotted none none;border-color:#cccccc #ffffff #cccccc #cccccc}
/*end 主导航边框动画*/

接下来还是看gif动态演示图吧：

当我再次打开编辑窗口的时候发现黄色高亮代码还在，你是不是觉得太不科学了？！

但是，仔细一看，你又会发现有问题，少了一串代码--border-style:none dotted none none;。猜测淘宝是不支持这种写法，那我们换种写法，接下来再进行测试，测试代码如下：

/*边框分开写法*/
.skin-box-bd .menu-list li.menu{border-left:2px dotted #f00;border-right:2px dotted #f00;border-top:2px dotted #f00;border-bottom:2px dotted #f00;}

当再次打开编辑窗口时发现已经可以了
如图：
看来此路可行啊。下面我们再来换种方法。我们先使用缩写，然后再分开控制各边框。测试代码如下：

/*边框缩写与分开写法并存*/
.skin-box-bd .menu-list li.menu{border:2px dotted #f00;border-width:0 2px 0 0;}

这种方法也是可以的。
如图：
完整代码就不上了，看官自己整理下吧。

看官看到这里的时候是不是觉得已经要结束了？！(其实我也是这么想的，箭头那个有空再续写吧。)可能会有相当一部分看官没明白文章写的是什么，想要表达什么，情有可原，毕竟这种细节问题很少有人研究。往大的方面来讲，如果你想玩淘宝漏洞，是时候该转换思维了。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/code/2015-05-22/269.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。