今天出去面試，遇到了一道有意思的面試題：寫一個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>


完美的答案。

?

轉載于:https://www.cnblogs.com/childsplay/p/4342132.html

總結

以上是生活随笔為你收集整理的一道有意思的css面试题，9宫格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。