边框九宫格
1. 前言
由于实现九宫格最方便的方式就是网格布局，所以边框九宫格咱们来拿网格实现法举例，边框九宫格的关键点其实并不在于用哪种方式实现九宫格，所以很容易融会贯通。
2. 笨 方法
相信大家都有过这样的经历( 假装你们有过 )：有一道数学题你并不会，但是你却想到了 一个 耿直的办法来解开这道数学题，答案都是正确的，只不过过程曲折了些：
比如问你 6 x 9 = ？ 突然你就忘记了九九乘法表，但是你知道 6 x 9 = 9 + 9 + 9 + 9 + 9 + 9 。
于是乎你就算呗，最后终于算出来了，顶多麻烦了点，但依然得出了正确答案不是吗？( 即使会被数学老师 dis s一番 )
边框九宫格也是同理，咱们不懂怎么让两个边框并在一起的时候怎么变细，但是咱们可以用笨 方法 ：
让两个相邻的盒子的其中 一个 的相邻边 不显示 边框不就完了！
这样的边框合在一起就不会出现两个边框贴在一起啦！
思路有了，那咱们再来个动态程序看一眼：
<!DOCTYPE html>
< html lang = " en " >
< head >
< Meta charset = " UTF-8 " >
< Meta name = " viewport " content = " width=device-width, initial-scale=1.0 " >
< title > Document </ title >
<!-- 在这里 用link 标签 引入 中文 渐变色 -->
< link rel = " stylesheet " href = " https://cdn.jsdelivr.net/npm/chi nes e-gradient " >
< style >
/* 清除 默 认样式 */
* { padding : ; margin : ; }
/* 全屏 显示 */
html, body, ul { height : }
/* 父元素 */
ul {
/* 清除 默 认样式 */
list-style : none ;
/* 显示 为网格布局 */
dis play : grid ;
/* 均分成三行三列 */
grid : repeat ( , fr ) / repeat ( , fr ) ;
/* 给个合适的间距 */
gap : px ;
/* 调用 动画 */
animation : clear-gap s ease-out infinite alternate
}
/* 子元素 */
li {
/* 两像素的边框 */
border : px solid black
}
/* 定义动画 */
@keyframes clear-gap { to { gap : } }
/* 第 一个 子元素 */
li :f irs t-child {
border-right : none ;
border-b ott om : none ;
}
/* 第二个子元素 */
li :nth-child(2) {
border-b ott om : none ;
}
/* 第三个子元素 */
li :nth-child(3) {
border-left : none ;
border-b ott om : none ;
}
/* 第四个子元素 */
li :nth-child(4) {
border-right : none ;
}
/* 第六个子元素 */
li :nth-child(6) {
border-left : none ;
}
/* 第七个子元素 */
li :nth-child(7) {
border-top : none ;
border-right : none ;
}
/* 第八个子元素 */
li :nth-child(8) {
border-top : none ;
}
/* 第九个子元素 */
li :last-child {
border-top : none ;
border-left : none ;
}
</ style >
</ head >
< body >
< ul >
< li > </ li >
< li > </ li >
< li > </ li >
< li > </ li >
< li > </ li >
< li > </ li >
< li > </ li >
< li > </ li >
< li > </ li >
</ ul >
</ body >
</ html >
运行结果：
3. 小结
这么做完全可以实现，绝对没毛病，但一般来说大家用笨 方法 解出来的数学题，即使答案正确，老师也不会给满分，因为 6 x 9 = ？ 就是想考察你的乘法水平，但你却用了加法，虽然答案一样但却饶了许多弯路。如果去参加面试的时候这么实现出来，面试官也不会给你满分，那么下一小节我们来看看有没有不那么麻烦的 方法 。
改进版 ? ? 加入边框声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did254511