小程序实现之—css伪元素实现带框加号

最新推荐文章于 2022-08-03 16:49:33 发布

txfyteen

最新推荐文章于 2022-08-03 16:49:33 发布

阅读量6.6k

点赞数 1

分类专栏：小程序

本文链接：https://blog.csdn.net/txfyteen/article/details/84190373

版权

小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

背景：基于小程序包大小的限制，使用css伪元素实现带框加号。减少包体积。

图片效果如下：


			.add {
				border: 1px solid;
				width: 100px;
				height: 100px;
				color: #ccc;
				transition: color .25s;
				position: relative;
			}
			
			.add::before {
				content: '';
				position: absolute;
				left: 50%;
				top: 50%;
				width: 80px;
				transform:translate(-50%, -50%);
				border-top: 10px solid;
			}
			
			.add::after {
				content: '';
				position: absolute;
				left: 50%;
				top: 50%;
				height: 80px;
				transform: translate(-50%,-50%);
				border-left: 10px solid;
			}


	<div class="add"></div>