伪类选择器，阴影效果，按钮滑块

最新推荐文章于 2022-02-22 15:58:59 发布

%小猴子

最新推荐文章于 2022-02-22 15:58:59 发布

阅读量139

点赞数 1

分类专栏：前端文章标签： css3 css html

本文链接：https://blog.csdn.net/qq_45944914/article/details/121215109

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

伪类选择器，阴影效果，按钮滑块

知识导入：
linear-gradient:表示线性渐变
background:linear-gradient(to bottom(方向）,开始颜色，结束颜色）
box-shadow:left值 top值 模糊值 扩大值 影子颜色 影子方向
-webkit-appearance: none; /*去除浏览器默认样式.*/
过渡效果：
transition：过渡属性 过渡时间 过渡方式  （过渡方式可以通过贝塞尔曲线获得） 延迟时间
伪元素选择器：
input[type='checkbox']::after{    
content: "content";}
在每个 <p> 的内容之后插入内容。

伪类选择器
xx：：checked{}
选择每个被选中的 <input> 元素。

效果展示：
点击前：
在这里插入图片描述
点击后：
参考代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			padding: 0;margin: 0;
		}
		input[type='checkbox']{
			-webkit-appearance: none; /*去除浏览器默认样式.*/
			margin: 50px;
			border: 10px solid #c1c1c1; /*画一个正方向*/
			border-radius: 50px;   /*切成圆形*/
			width: 150px;  /*将圆形变成长椭圆形*/
			height: 70px;  /*将长椭圆形形变成空心*/
			background: #888;  /*空心的颜色*/
			position: relative;  /*相对定位，相对于自己来定位，abolute是绝对定位，
			根据父层定位,一般的relative都是给它做父而设置*/
			box-shadow: 0 0 10px 1px #3f3f3f inset; /*制作阴影：参数值：left值 top值 模糊值 扩大值 影子颜色 影子方向*/
			
		}	
		input[type='checkbox']:checked{
			background: #6FB500;   /*选择type='checkbox'这个元素，并设置触发、点击选择以后的效果*/
		}
			/*利用伪元素给复选框增加滑块*/
		input[type='checkbox']::after{    
			content: "content";/*利用伪元素改变自身，通过定位对原来的样式进行修饰*
			xx：：after表示在xx之后添加如下属性 ，注意是双冒号
			content:""为添加的内容*/
			display: block;  /*设置属性，块元素*/
			width: 60px;height: 60px;
			position: absolute;  /*绝对定位*/
			left: -5px;top: -5px;
			border-radius: 30px;
			background: gray;
			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>
	<body>
		<input type="checkbox" />
	</body>
</html>