颖想家

最近在写微信小程序，想用纯css实现田字格的背景，其实也可以理解为用CSS实现十字的效果。

因为我发现在微信小程序里不支持svg，所以考虑使用css来实现了。实现的代码其实也比较简单。在微信的wxml页面中有以下代码：<view class="cross"></view>

其中cross的css代码如下：

.cross {

width: 300px; /* 设置容器宽度 */

height: 300px; /* 设置容器高度 */

position: relative; /* 设置相对定位 */

border: 1px solid #ddd;

}

.cross::before,

.cross::after {

content: ''; /* 必须加此项才能显示伪元素 */

position: absolute; /* 设置绝对定位 */

top: 50%; /* 设置上下居中 */

left: 0; /* 伪元素定位在容器最左 */

width: 100%; /* 伪元素宽度占满整个容器 */

height: 1px; /* 伪元素高度为1个像素 */

background-color: #ddd; /* 设置黑色背景色 */

transform: translateY(-50%); /* 让伪元素上下居中 */

}

.cross::before {

transform: rotate(90deg); /* 旋转90度 */

}

.cross::after {

transform: rotate(-180deg); /* 旋转-180度 */

}

这样就实现了用纯css实现田字格的背景了。

svg实现田字格背景的方法：

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" style="border: #DDD solid 1px; margin: 0 auto;">

    <line x1="100" y1="0" x2="100" y2="200" stroke="#DDD" />

    <line x1="0" y1="100" x2="200" y2="100" stroke="#DDD" />

</svg>