当前位置：首页 > CSS

css怎么制作加号

2026-04-01 16:19:08CSS

使用伪元素创建加号

通过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%);
}

使用边框和旋转

通过元素的边框属性生成加号。设置元素宽高为0，利用边框宽度形成线条，再通过旋转组合。

.plus-border {
  width: 0;
  height: 0;
  position: relative;
}

.plus-border::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 0;
  border-top: 2px solid black;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.plus-border::after {
  content: "";
  position: absolute;
  width: 0;
  height: 20px;
  border-left: 2px solid black;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

使用背景线性渐变

通过CSS的linear-gradient背景属性生成加号。设置两个渐变方向，分别形成横竖两条线。

.plus-gradient {
  width: 20px;
  height: 20px;
  background-image: 
    linear-gradient(to bottom, black, black),
    linear-gradient(to right, black, black);
  background-size: 
    100% 2px,
    2px 100%;
  background-position: 
    center,
    center;
  background-repeat: no-repeat;
}

使用Unicode字符

直接使用Unicode中的加号字符，通过CSS调整大小和颜色。这种方法简单但样式受限。

.plus-unicode {
  font-size: 20px;
  color: black;
}

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

使用SVG内联

通过内联SVG代码创建加号，可灵活控制线条粗细、颜色和形状。

css怎么制作加号

<svg class="plus-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>