7.1.2　边框定义

定义了基本的方块，下面就需要定义鼠标移动时要显示的边框了。这里的“边框”其实不是真正的border，而是outline轮廓，其原因是outline不占用布局空间，并且也能产生同样的效果，所以，我们就使用outline来定义所谓的“边框”。代码如下：

.tile:hover {
    outline: #999999 solid 3px; /* 鼠标移动时，设置轮廓颜色和边框 */
}
 
.tile.no-outline {              /* 提供一个no-outline样式用于专门禁用轮廓*/
    outline-color: transparent; /* 不使用轮廓时，设置透明色 */
}

至此，基本的样式就定义完了，我们通过在一个div上应用tile样式即可制作出一个默认的磁贴。代码如下：

<div class="tile"></div>

上述示例的运行效果如图7-1所示。

图7-1　基础磁贴效果

注意

上述效果中的右图是鼠标移动上去时的效果。