当前位置: 首页 > news >正文

【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>
http://www.dtcms.com/a/305037.html

相关文章:

  • Three.js 性能优化全面指南:从几何体合并到懒加载资源
  • OpenLayers 综合案例-台风风场模拟
  • MIAOYUN参编信通院《大模型API服务性能测试标准》
  • 营销活动效果分析与策略优化
  • 【JVM】常见的 Java 垃圾回收算法以及常见的垃圾回收器介绍及选型
  • ARM7微处理器的核心优势
  • Docker入门基础使用
  • 【vue(2)插槽】
  • ZKmall开源商城中台架构实践:API 网关与服务治理如何撑起电商技术骨架
  • vue3实战九、vue3+vue-cropper实现头像修改
  • 【Linux】批量处理多个用户的 sudo 权限问题
  • 【STM32开发】-基础开发笔记(STM32F103,HAL库开发)
  • 【ComfyUI学习笔记04】案例学习:局部重绘 - 上
  • 墨者:XPath注入漏洞实战
  • 第二十五节 MATLAB矩阵的加法和减法、除法(左,右)矩阵
  • Arduino声控RGB矩阵音乐节奏灯DIY全攻略
  • 解密数据结构之二叉树
  • Android11平台下rk3568的ATGM332D定位模块适配
  • 全志T507平台GPIO 控制(二)
  • OpenCV图像算数运算可莉版
  • bash命令创建新conda环境
  • Kubernetes自动扩容方案
  • 力扣-104. 二叉树的最大深度
  • Linux系统的虚拟控制台介绍(桌面卡死的拯救方案)
  • 深入探索爬虫与自动化脚本:释放效率的利器
  • 手写简易Spring框架
  • 万字详解——OSI七层模型:网络通信的完整架构解析
  • mysql 之多表
  • others-Facebook落地页自建归因逻辑
  • 如何快速把Clickhouse数据同步到Mysql