css制作加号
使用CSS制作加号
通过CSS的伪元素和边框属性可以轻松实现加号效果。以下是几种常见的方法：
方法一：使用伪元素和绝对定位
.plus-icon {
position: relative;
width: 20px;
height: 20px;
}
.plus-icon::before, .plus-icon::after {
content: "";
position: absolute;
background-color: #000;
}
.plus-icon::before {
width: 100%;
height: 2px;
top: 50%;
transform: translateY(-50%);
}
.plus-icon::after {
width: 2px;
height: 100%;
left: 50%;
transform: translateX(-50%);
}方法二：使用单个元素的边框
.plus-icon {
width: 20px;
height: 20px;
position: relative;
}
.plus-icon::before {
content: "";
position: absolute;
top: 0;
left: 9px;
width: 2px;
height: 100%;
background: #000;
}
.plus-icon::after {
content: "";
position: absolute;
top: 9px;
left: 0;
width: 100%;
height: 2px;
background: #000;
}方法三：使用旋转变换
.plus-icon {
width: 20px;
height: 20px;
position: relative;
}
.plus-icon::before {
content: "+";
position: absolute;
font-size: 20px;
line-height: 1;
}调整加号样式
可以通过修改以下属性来自定义加号的外观：
width和height控制加号大小background-color改变颜色transform属性调整位置- 添加
transition实现动画效果
响应式加号
使用相对单位可以让加号适应不同屏幕尺寸：
.plus-icon {
width: 1em;
height: 1em;
font-size: 24px;
}这些方法都可以通过简单的HTML元素实现：
<div class="plus-icon"></div>
