CSS中我们可以使用伪元素 ::before 和 ::after 来创建十字架框,下面是一个例子:.box { position: relative; height: 300px; width: 50
CSS中我们可以使用伪元素 ::before 和 ::after 来创建十字架框,下面是一个例子:
.box { position: relative; height: 300px; width: 500px; background-color: #fff; } .box::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; border-top: 1px solid #000; } .box::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid #000; }
首先我们创建一个包裹元素,设置它的 position 为 relative,然后我们使用 ::before 伪元素在包裹元素中间创建一个横线,设为绝对定位,top 为 50%,left 和 right 都为 0,border-top 设为 1px,并设置颜色为黑色。
接着我们使用 ::after 伪元素在包裹元素左边创建一个竖线,设为绝对定位,top 和 bottom 都为 0,left 为 50%,border-left 设为 1px,并设置颜色为黑色。
这样我们就完成了一个简单的十字架框,调整包裹元素的尺寸和背景色就可以适用于不同的场景。
粉丝
0
关注
0
收藏
0