CSS创建居中十字架:带蓝色边框
可以使用以下CSS代码来创建一个居中的十字架,边框为蓝色:
.cross {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border: 2px solid blue;
}
.cross::before,
.cross::after {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
background-color: blue;
}
.cross::before {
transform: translateY(-50%);
}
.cross::after {
transform: rotate(90deg) translateY(-50%);
}
然后在HTML中使用以下代码来使用这个CSS样式:
<div class='cross'></div>
这样就可以创建一个居中的十字架,边框为蓝色。
原文地址: https://www.cveoy.top/t/topic/qeKk 著作权归作者所有。请勿转载和采集!