前端之阴影效果

最新推荐文章于 2024-08-31 09:24:27 发布

冥极醉醉冥极

最新推荐文章于 2024-08-31 09:24:27 发布

阅读量463

点赞数

分类专栏：前端学习文章标签： html5 css

本文链接：https://blog.csdn.net/qq_19831379/article/details/119151421

版权

前端学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题</title>
		
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			
			input[type='checkbox'] {
				-webkit-appearance: none;
				margin: 50px;
				border: 10px solid #c1c1c1;
				border-radius: 50px;
				width: 170px;
				height: 70px;
				background-color: #888;
				position: relative;
				/* 阴影：0px是left值，0px是top值，10px是模糊值，1px是扩大范围，black是影子的颜色，inset是向内，默认向外 */
				box-shadow: 0px 0px 10px 1px #3f3f3f inset;
				/* transition: width(过度属性) 1s(过渡时间) ease-in(过渡方式) 2s(过渡时间) */
				transition: 0.6s;
			}
			
			/* 伪元素选择器，选择才有效 */
			input[type='checkbox']:checked {
				background-color: #6FB500;
			}
			
			/* 伪元素选择器，是作为子元素的 */
			input[type='checkbox']::after {
				content: "";
				display: block;
				width: 60px;
				height: 60px;
				position: absolute;
				left: -5px;
				top:-5px;
				border-radius: 30px;
				/* background-color: gray; */
				/* linear-gradient是向下，#d3d3d3是开始的元素，#9e9e9e是结束的颜色 */
				background: linear-gradient(to bottom, #d3d3d3, #9e9e9e);
				/* 可以设置多个阴影 */
				box-shadow: 0px 2px 2px 0px #eee inset, 2px 1px 2px 0px #333;
				transition: 0.6s;
			}
		
			
			input[type='checkbox']:checked::after {
				left: 95px;
			}
		</style>
	</head>
	
	<body>
		<input type="checkbox"/>
	
	</body>
</html>