【tips】小程序css ➕号样式

上传的时候一般页面显示的是加号。不用图片可以用样式实现；

wxss：

css 复制代码

/* 加号 */
.plus-box {
  width: 91rpx;
  height: 91rpx;
  border-radius: 6rpx;
  background: rgba(204, 204, 204, 1);
  position: relative; /* 用于定位加号 */
}

/* 水平线条 */
.plus-box::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40rpx; /* 横线长度 */
  height: 6rpx; /* 横线粗细 */
  background-color: white; /* 加号颜色 */
  transform: translate(-50%, -50%); /* 居中对齐 */
  border-radius: 3rpx; /* 线条圆角 */
}

/* 垂直线条 */
.plus-box::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6rpx; /* 竖线粗细 */
  height: 40rpx; /* 竖线长度 */
  background-color: white; /* 加号颜色 */
  transform: translate(-50%, -50%); /* 居中对齐 */
  border-radius: 3rpx; /* 线条圆角 */
}

wxml

html 复制代码

      <view class="plus-box"></view>