一道有意思的css面试题，9宫格

今天出去面试，遇到了一道有意思的面试题：写一个css9宫格，要求边框是5px，鼠标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：http://iridescent.cn/test/      2：http://iridescent.cn/test/test2.html

 

 

 

---------------------------------------------------------------

风云的大神不愧是大神，分分钟就把这道题给搞定了，上代码：

<style type="text/css">
    .main{
        width:190px;
        height:190px;
    }
    .box{
        float: left;
        width: 50px;
        height: 50px;
        background: #000;
        border: 10px solid red;
        margin:-10px 0px 0px -10px;
        position:relative;
        z-index:1;
    }
    .box:hover{
         border: 10px solid yellow;
         z-index:2;
    }
</style>
<div class="main">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>


完美的答案。