面白いcss面接問題、9宮格

今日面接に出て、面白い面接問題に出会った:css 9宮格を書いて、枠が5 pxであることを要求して、マウスhoverの時枠が変色します.
当時は答えられなかったが、二つの書き方を考えても最適解ではないような気がした.
1.html部分

<ul>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

</ul>

css部分

        *{ margin:0; padding:0;}

        ul{ padding:20px 0 0 20px; width: 360px; height: 360px; background-color: #ff0000; overflow: hidden;}

        li{ float: left; width: 100px; height: 100px; margin:0 20px 20px 0; background-color: #000000; list-style-type: none;}

        li:hover{ box-shadow:0 0 0 20px orange;}

これはbox-shadowを用いており,明らかに最適解ではない.
2.html部分

<ul>

    <li><a></a> </li>

    <li><a></a> </li>

    <li><a></a> </li>

    <li><a></a> </li>

    <li><a></a> </li>

    <li><a></a> </li>

    <li><a></a> </li>

    <li><a></a> </li>

    <li><a></a> </li>

</ul>

css部分

        *{ margin:0; padding:0;}

        ul{ padding:20px 0 0 20px; width: 360px; height: 360px; background-color: #ff0000; overflow: hidden;}

        li{ position: relative; float: left; width: 100px; height: 100px; margin:0 20px 20px 0; background-color: #000000; list-style-type: none;}

        li a{ position: absolute; left: 0; top: 0; width: 100%; height:100%;}

        li:hover a{ left: -20px; top: -20px; border:20px solid orange;}

これはラベルを1つ多く使っているが,明らかに最適解ではない.
みんながどんな高見を持っているか分からない.
オンラインテストページ1:http://iridescent.cn/test/:http://iridescent.cn/test/test2.htmlを添付
 
 
 
---------------------------------------------------------------
風雲の大神はさすが大神だけあって、分を分けてこの問題を解決して、コードを書きます: