【tips】小程序css ➕号样式
上传的时候一般页面显示的是加号。不用图片可以用样式实现;
wxss:
/* 加号 */
.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
<view class="plus-box"></view>