css 设计内侧阴影 inset

<template>
	<div class="home">
		<div class="button">

			<!-- 按钮 凸显 -->
			<button class="button1 flex marginL">
				<img src="../assets/user.png" alt="" srcset="">
			</button>

			<!-- 按钮 凹陷+外部阴影 -->
			<div class="button2 flex marginL">
				<div class="button2_x flex">
					<img src="../assets/user.png" alt="" srcset="">
				</div>
			</div>

			<!-- 按钮 内部阴影 凹陷感 -->
			<div class="button3 flex marginL">
				<img src="../assets/user.png" alt="" srcset="">
			</div>

			<!-- 输入框 内嵌图标+内部阴影 -->
			<div class="input flex marginL">
				<input class="inputx" placeholder="请输入" />
				<img src="../assets/user.png" alt="" srcset="">
			</div>

			<!-- 三角指示 -->
			<div class="triangle flex marginL">
				<div class="triangle_x">
					<img src="../assets/user.png" alt="" srcset="">
				</div>
				<div class="triangle_x">
					<img src="../assets/user.png" alt="" srcset="">
				</div>
				<div class="triangle_v"></div>
			</div>

			<!-- 滑动按钮switch -->
			<div class="switch  marginL">
				<div class="switch_x"></div>
			</div>

			<div class="donghua  marginL">
				<img class="donghua_x" src="../assets/guang.png" />
			</div>

			<!-- 进度条 -->
			<div class="rate">
				<div class="rates" style="width: 70%;">70%</div>
			</div>

		</div>
		<div style="width: 100%;float: left; margin-top:20px;">
			inset 内阴影 属性:
			box-shadow: inset 5px 6px 10px #ddd;
		</div>

	</div>
</template>

<script setup>

</script>

<style scoped>
	img {
		width: 30px;
		height: 30px;
		float: left;
	}

	.flex {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.flex:hover {
		background: radial-gradient(circle at 10% 1%, #0f80ff, #ccc, #fff);
	}

	.flex:active {
		background: radial-gradient(circle at 10% 10%, #eee, #ccc, #eee);
	}

	.marginL {
		margin: 10px 20px;
	}

	/* ================外部阴影================ */
	.button1 {
		width: 50px;
		height: 50px;
		float: left;
		border-radius: 50%;
		padding: 0px;
		margin: 5px;
		box-shadow: 6px 6px 15px 0.1px #ccc;
		border-style: none;
		background: radial-gradient(circle at 1% 10%, #eee, #fff, #eee);
	}


	/* ================外部阴影 渐变背景================ */
	.button2 {
		width: 50px;
		height: 50px;
		float: left;
		padding: 4px;
		border-radius: 50%;
		background: radial-gradient(circle at 1% 10%, #fff, #eee, #fff);
	}

	.button2_x {
		width: 100%;
		height: 100%;
		float: left;
		border-radius: 50%;
		box-shadow: 6px 6px 15px 0.1px #ccc;
		background: radial-gradient(circle at 0% 0%, #ccc, #ccc, #fff, #fff, #eee);
	}

	/* ===============内部阴影================= */
	.button3 {
		width: 50px;
		height: 50px;
		float: left;
		padding: 4px;
		border-radius: 20%;
		background-color: #fff;
		box-shadow: inset 3px 3px 10px rgba(0, 0, 0, 0.3);
	}

	/* ================内嵌输入框================ */
	.input {
		width: 150px;
		float: left;
		padding: 2px 10px;
		border-radius: 50px;
		background-color: #fff;
		/* inset 内阴影 */
		box-shadow: inset 5px 6px 10px #dddddd, inset 5px 6px 10px #fff;

		border-style: solid;
		border-width: 1px 1px 1px 1px;
		border-color: #ccc #fff #fff #ccc;
	}

	.inputx {
		width: 100%;
		height: 30px;
		float: left;
		border-radius: 50px;
		border-style: none;
		background-color: #00000000;
	}

	.inputx:active {
		border-style: none;
	}

	/* ================三角指示================ */
	.triangle {
		width: 100px;
		height: 40px;
		padding: 2px;
		float: left;
		border-radius: 10px;
		background: radial-gradient(circle at 0% 0%, #eee, #fff, #fff, #fff);
		box-shadow: 1px 2px 6px 1px #dddddd;
		position: relative;
	}

	.triangle_x {
		padding: 10px;
		float: left;
		border-radius: 20%;
	}

	.triangle_v {
		width: 20px;
		height: 20px;
		position: absolute;
		bottom: -10px;
		background-color: #fff;
		transform: rotate(45deg);
		box-shadow: 4px 3.5px 6px 1px #dddddd;
	}

	/* ================滑动按钮================ */
	.switch {
		width: 100px;
		height: 30px;
		padding: 2px;
		float: left;
		border-radius: 30px;
		box-shadow: inset 5px 6px 10px #0f80ff;
		background-color: #0f80ff88;
	}

	.switch_x {
		width: 30px;
		height: 30px;
		border-radius: 50px;
		background-color: #fff;
		box-shadow: 1px 3px 6px 0.1px #000;
	}

	.switch_x:active {
		animation: switchi 0.5s linear both;
	}

	@keyframes switchi {
		from {
			transform: translateX(0px);
		}

		to {
			transform: translateX(70px);
		}
	}

	/* ============== 进度条 ============== */
	.rate {
		width: 100%;
		height: 20px;
		float: left;
		border-radius: 20px;
		background-color: #eee;
		box-shadow: inset 5px 6px 10px #ccc;
		position: relative;
		overflow: hidden;
	}

	.rates {
		width: 80%;
		height: 20px;
		border-radius: 20px 0px 0px 20px;
		background-color: #f11;
		box-shadow: inset 5px 6px 10px #800002;
		position: absolute;
	}
</style>