当前位置：首页 > CSS

css怎么制作加号

2026-01-28 13:11:45CSS

使用伪元素创建加号

通过CSS的伪元素（::before和::after）可以轻松实现加号效果。定义一个正方形元素，并通过伪元素添加横线和竖线。

.plus-icon {
  position: relative;
  width: 20px;
  height: 20px;
}

.plus-icon::before,
.plus-icon::after {
  content: "";
  position: absolute;
  background-color: black;
}

.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-rotate {
  width: 20px;
  height: 20px;
  position: relative;
}

.plus-icon-rotate::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background-color: black;
  transform: translateX(-50%);
}

.plus-icon-rotate::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: black;
  transform: translateY(-50%);
}

使用Unicode字符

直接使用Unicode中的加号字符（+）并调整样式，是最简单的方法。

.plus-unicode {
  font-size: 24px;
  color: black;
  text-align: center;
  line-height: 1;
}

<div class="plus-unicode">+</div>

使用Flexbox居中加号

结合Flexbox布局，可以确保加号在容器中完美居中，适合需要对齐的场景。

.plus-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}

.plus-flex {
  width: 20px;
  height: 2px;
  background-color: black;
  position: relative;
}

.plus-flex::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 20px;
  background-color: black;
  top: -9px;
  left: 9px;
}

使用SVG内联

通过内联SVG可以创建高度可定制的加号，适合需要复杂样式或动画的场景。

<div class="plus-svg">
  <svg width="20" height="20" viewBox="0 0 20 20">
    <line x1="0" y1="10" x2="20" y2="10" stroke="black" stroke-width="2"/>
    <line x1="10" y1="0" x2="10" y2="20" stroke="black" stroke-width="2"/>
  </svg>
</div>