android 锯齿边框,css3 上锯齿边框只有半个

Document

* {

margin: 0;

padding: 0;

}

.bg1 {

/* width: 300px; */

height: 50px;

/* background: #caca8c; */

background-image: -webkit-gradient(linear, 50% 0, 0 100%, from(transparent), color-stop(.5, transparent), color-stop(.5, #f5f5f5), to(#f5f5f5)), -webkit-gradient(linear, 50% 0, 100% 100%, from(transparent), color-stop(.5, transparent), color-stop(.5, #f5f5f5), to(#f5f5f5));

background-size: 7px 5px;

background-repeat: repeat-x;

background-position: 0 100%;

}

.bg2 {

height: 50px;

/* background: #caca8c; */

background-image: -webkit-gradient(linear, 50% 0, 0 100%, from(#f5f5f5), color-stop(.5, #f5f5f5), color-stop(.5, transparent), to(transparent)), -webkit-gradient(linear, 50% 0, 0 100%, from(#f5f5f5), color-stop(.5, #f5f5f5), color-stop(.5, transparent), to(transparent));

background-size: 7px 5px;

background-repeat: repeat-x;

background-position: 0 0;

}

.gray {

height: 24px;

background: #f5f5f5;

}

bg2的上的锯齿如何变得完整，它只有半个，如何像bg1那样完整，但是他是在上边，bg1是在下边，麻烦大家帮我看一下是哪里出错了，谢谢