【uniapp】小程序中使用css实现一个带框的加减号

小付学代码

已于 2022-08-17 09:30:14 修改

阅读量739

点赞数

分类专栏： uni-app 文章标签： uni版 44rpx CSS适配小屏优化 hover效果

于 2022-08-03 16:49:33 首次发布

本文链接：https://blog.csdn.net/ONLYSRY/article/details/126143741

版权

uni-app 专栏收录该内容

62 篇文章 5 订阅

订阅专栏

uni版完整代码如下：【网页用的话直接把css拉出去，写一个div即可】注意：px->rpx我没改

<template>
	<view class="add"></view>
</template>


<script>

</script>

<style scoped>
	.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;
		margin-left: -40px;
		margin-top: -5px;
		border-top: 10px solid;
	}

	.add::after {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		height: 80px;
		margin-left: -5px;
		margin-top: -40px;
		border-left: 10px solid;
	}

	.add:hover {
		color: red;
	}
</style>

这个案例的有点大，我自己写了个44rpx x 44rpx的凑合用：

<template>
	<view class="add"></view>
</template>


<script>

</script>

<style scoped>
	.add {
		border: 1rpx solid;
		width: 44rpx;
		height: 44rpx;
		color: #D9D9D9;
		transition: color .25s;
		position: relative;
		margin-top: 80rpx;
		margin-left: 180rpx;
	}


	.add::before {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		width: 28rpx;
		margin-left: -13rpx;
		margin-top: 0rpx;
		border-top: 2rpx solid;
	}

	.add::after {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		height: 28rpx;
		margin-left: 0rpx;
		margin-top: -13rpx;
		border-left: 2rpx solid;
	}

	.add:hover {
		color: red;
	}
</style>