css制作加号

使用伪元素实现加号

通过CSS的::before和::after伪元素创建水平和垂直线条组合成加号。设置一个正方形容器，伪元素绝对定位居中，调整宽高和背景色。

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

.plus-icon::before,
.plus-icon::after {
  content: "";
  position: absolute;
  background-color: #000;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.plus-icon::before {
  width: 60%;
  height: 2px;
}

.plus-icon::after {
  width: 2px;
  height: 60%;
}

使用边框实现加号

利用元素的边框属性直接绘制加号。设置元素宽高为0，通过边框粗细控制线条尺寸，透明边框保留需要的部分。

.plus-border {
  width: 0;
  height: 0;
  position: relative;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #000;
  margin: 20px;
}

.plus-border::after {
  content: "";
  position: absolute;
  left: -10px;
  top: -30px;
  border-left: 10px solid #000;
  border-right: 10px solid transparent;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

使用背景渐变实现加号

CSS线性渐变绘制加号线条。通过background-image组合两个渐变方向（水平和垂直）的纯色条纹。

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

SVG实现加号

使用内联SVG代码创建精确控制的加号图形。通过<path>或<line>元素定义线条路径。

<svg width="24" height="24" viewBox="0 0 24 24">
  <path d="M12 4V20M4 12H20" stroke="#000" stroke-width="2"/>
</svg>

动画加号效果

为静态加号添加旋转或颜色变化的交互效果。结合CSS过渡或关键帧动画增强视觉反馈。

.plus-animate {
  /* 基础样式同伪元素实现 */
  transition: transform 0.3s;
}

.plus-animate:hover {
  transform: rotate(90deg);
}

每种方法适用于不同场景：伪元素方案适合动态修改颜色/尺寸，SVG适合高分辨率显示，渐变方案代码最简洁。根据项目需求选择实现方式，注意调整颜色和尺寸变量保持视觉一致性。