背景图渐变模拟边框

chrome并不支持

by weiming le

HTML

<div class="table-list">
    <ul class="table">
        <li><a class="react" gaevent="imt/selectCity/shanghai" href="http://i.meituan.com/?city=shanghai" data-citypinyin="shanghai">上海</a>

        </li>
        <li><a class="react" gaevent="imt/selectCity/beijing" href="http://i.meituan.com/?city=beijing" data-citypinyin="beijing">北京</a>

        </li>
        <li><a class="react" gaevent="imt/selectCity/chongqing" href="http://i.meituan.com/?city=chongqing" data-citypinyin="chongqing">重庆</a>

        </li>
        <li><a class="react" gaevent="imt/selectCity/chengdu" href="http://i.meituan.com/?city=chengdu" data-citypinyin="chengdu">成都</a>

        </li>
        <li><a class="react" gaevent="imt/selectCity/shenzhen" href="http://i.meituan.com/?city=shenzhen" data-citypinyin="shenzhen">深圳</a>

        </li>
        <li><a class="react" gaevent="imt/selectCity/nanjing" href="http://i.meituan.com/?city=nanjing" data-citypinyin="nanjing">南京</a>

        </li>
        <li><a class="react" gaevent="imt/selectCity/tianjin" href="http://i.meituan.com/?city=tianjin" data-citypinyin="tianjin">天津</a>

        </li>
        <li><a class="react" gaevent="imt/selectCity/hangzhou" href="http://i.meituan.com/?city=hangzhou" data-citypinyin="hangzhou">杭州</a>

        </li>
        <li><a class="react" gaevent="imt/selectCity/guangzhou" href="http://i.meituan.com/?city=guangzhou" data-citypinyin="guangzhou">广州</a>

        </li>
        <li><a class="react" gaevent="imt/selectCity/xian" href="http://i.meituan.com/?city=xian" data-citypinyin="xian">西安</a>

        </li>
        <li><a class="react" gaevent="imt/selectCity/wuhan" href="http://i.meituan.com/?city=wuhan" data-citypinyin="wuhan">武汉</a>

        </li>
    </ul>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    font-family:'Helvetica Neue', Helvetica, STHeiTi, Arial, sans-serif;
    font-size: 1.25;
}
body {
    font-size: 0.75rem;
    line-height: 1.5;
    overflow-x: hidden;
    height: 100%;
    margin: 0;
    color: #333;
    background-color: white;
    -webkit-overflow-scrolling: touch;
    background-color: #f0efed;
}
ul {
    list-style: none;
}
.table-list .table {
    min-height: 2.5rem;
    position: relative;
    overflow: hidden;
    z-index: 0;
    background-color: #fff;
    margin: 1.25rem;
    border: 1px solid #ddd8ce;
    border-radius: 3px;
    background-repeat: repeat-y;
    background-size: 1px auto;
    background-image: linear-gradient(to bottom, #ccc, #ccc), linear-gradient(to bottom, #ccc, #ccc), linear-gradient(to bottom, #ccc, #ccc);
    background-position: 25% 0, 50% 0, 75% 0;
}
@media all and (max-width: 960px) {
    .table-list .table {
        background-image: linear-gradient(to bottom, #ccc, #ccc), linear-gradient(to bottom, #ccc, #ccc);
        background-position: 33.33333% 0, 66.66667% 0;
    }
}
.table-list .table li {
    width: 25%;
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: center;
    border-bottom: 1px solid #ddd8ce;
    margin-bottom: -1px;
    float: left;
    position: relative;
    z-index: 10;
}
@media all and (max-width: 960px) {
    .table-list .table li {
        width: 33.33333%;
    }
}
.table-list .react {
    display: block;
    height: 100%;
    text-decoration: none;
    color: #333;
}
/*# sourceMappingURL=table-list.css.map */