当前位置：首页 > article >正文

【CSS】鼠标、轮廓线、滤镜、堆叠层级

article 2025/1/16 18:04:16

cursor 鼠标
outline 轮廓线
filter 滤镜
z-index 堆叠层级

cursor 鼠标

值	说明	值	说明
`crosshair`	十字准线	`s-resize`	向下改变大小
`pointer` \ `hand`	手形	`e-resize`	向右改变大小
`wait`	表或沙漏	`w-resize`	向左改变大小
`help`	问号或气球	`ne-resize`	向上右改变大小
`no-drop`	无法释放	`nw-resize`	向上左改变大小
`text`	文字或编辑	`se-resize`	向下右改变大小
`move`	移动	`sw-resize`	向下左改变大小
`n-resize`	向上改变大小

<style>
	div{
		width: 600px;height: 90px;
		border: 2px dashed #0022ff;

		/* 鼠标样式 */
		cursor: no-drop;
	}
</style>
<div></div>

效果:
在这里插入图片描述

outline 轮廓线

值	说明	值	说明
`none`	无轮廓	`dotted`	轮廓为一系列点
`dashed`	轮廓为一系列短线	`solid`	轮廓为实线
`double`	轮廓为两根有空隙的线	`groove`	轮廓呈凹下状
`ridge`	轮廓呈凸起状	`inset`	轮廓呈嵌入状
`outset`	轮廓呈突出状

<style>
	div{ width: 400px;height: 50px;margin: 22px; }
	div:nth-of-type(1){
		/* 不占据空间，绘制于元素内容周围 */
		
		outline: #2225ff dotted 10px; /* outline:颜色 样式 粗细 */
	}
	div:nth-of-type(2){ outline: #0fa612 dashed 10px; }
	div:nth-of-type(3){ outline: #ff7e00 solid 10px; }
	div:nth-of-type(4){ outline: #ff72d3 double 10px; }
	div:nth-of-type(5){ outline: #aeff00 groove 10px; }
	div:nth-of-type(6){ outline: #e298ff ridge 10px; }
	div:nth-of-type(7){ outline: #fffb00 inset 10px; }
	div:nth-of-type(8){ outline: #5490ff outset 10px; }

	/* 通过将 outline 属性设置为 none 或 0，会移除元素的默认聚焦边框样式。若移除了默认聚焦样式，记得提供一个显眼的聚焦样式 */
	input{ outline:none; }
	input:focus{ outline: red dashed 5px; }
</style>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<input type="text" autofocus>

效果:
在这里插入图片描述

filter 滤镜

作用	值	范围
模糊	`blur(a)`	a 填`像素值`，如：5px
阴影	`drop-shadow(a b c d)`	a `水平方向`阴影位置，正数 px 向右 b `垂直方向`阴影位置，正数 px 向下 c 为阴影的`范围`，px d 为`颜色`参数常用 rgba 的格式
亮度	`brightness(e)`	`e > 1 加`亮度，`e < 1 减`亮度
对比度	`contrast(f)`	`f > 1 加`对比度，`f < 1 减`对比度
灰度	`grayscale(g)`	g 取 0 ~ 1 的范围，即 `[0,1]`，当 1 表示完全灰度
反转	`invert(h)`	h 取 0 ~ 1 的范围，即 `[0,1]`，当 1 表示完全反转颜色
饱和度	`saturate(i)`	`i > 1 加`饱和度，`i < 1 减`饱和度
褐色效果	`sepia(j)`	j 取 0 ~ 1 的范围，即 `[0,1]`，当 1 表示完全褐色
色相旋转	`hue-rotate(k)`	k 取`度数`，如：90deg；`360度代表完整的色相环，回到初始颜色`

<style>
	img{ margin: 50px; }
	
	img:nth-of-type(1){ filter: blur(10px); /* 模糊 */ }
	img:nth-of-type(2){ filter: drop-shadow(10px 10px 10px #ff45f0); /* 阴影 */ }
	img:nth-of-type(3){ filter: brightness(2); /* 亮度 */ }
	img:nth-of-type(4){ filter: contrast(2); /* 对比度 */ }
	img:nth-of-type(5){ filter: grayscale(1); /* 灰度 */ }
	img:nth-of-type(6){ filter: invert(1); /* 反转 */ }
	img:nth-of-type(7){ filter: saturate(5); /* 饱和度 */ }
	img:nth-of-type(8){ filter: sepia(1); /* 褐色效果 */ }
	img:nth-of-type(9){ filter: hue-rotate(-90deg); /* 色相旋转（正数顺时针旋转，负数逆时针旋转） */ }
</style>
<div>
	<img src="./day5/dlam.jpg">
	<img src="./day5/dlam.jpg">
	<img src="./day5/dlam.jpg">
	<img src="./day5/dlam.jpg">
	<img src="./day5/dlam.jpg">
	<img src="./day5/dlam.jpg">
	<img src="./day5/dlam.jpg">
	<img src="./day5/dlam.jpg">
	<img src="./day5/dlam.jpg">
</div>

效果:
在这里插入图片描述

z-index 堆叠层级

层叠顺序： background --> 负z-index --> block块状水平盒子 --> float浮动盒子 --> inline/inline-block -–> z-index:auto或z-index:0 --> 正z-index 。 作用： 设置元素的堆叠顺序( 元素层级 )，当元素发生重叠时，层级高的元素会覆盖在层级低的元素的上面。层叠顺序的比较止步于父级层叠上下文。 取值范围： 默认auto与父元素的层级相等，若各级祖先元素均未设置该属性，则类似于0；±整数，数值越大层级越高，反之越低；inherit：继承父元素的z-index的属性值。 适用范围： 只能在设置了 position: relative | absolute | fixed 的元素和父元素 和设置了 display: flex 属性的子元素中起作用，在其它元素中是不作用的

同级元素之间

<style>
	.box{ width: 270px; height: 270px; border: 1px solid red; margin-left: 50px; }
	.one,.two{ width: 160px;height: 160px; }

	/*
		1)z-index的值不同，则值大的，层级越高，显示在越上层

		2)值相同，则由元素的书写顺序决定，后面的元素会覆盖在前面的元素的上层显示

		3)若都设置了定位，但z-index值一个设置了，另一个没设置（则取默认值 0）
	*/
	.one{
		background-color: #145eff;
		position: relative; 
		z-index: 90;
	}
	.two{
		background-color: #ffec00;
		position: relative; 
		top: -80px;
		left: 80px;
	}
</style>
<div class="box">
	<div class="one">盒子1</div>
	<div class="two">盒子2</div>
</div>

效果:
在这里插入图片描述

父子元素之间

<style>
	.box{ width: 270px; height: 270px; border: 1px solid red; margin-left: 50px; }
	.one{ width: 220px;height: 220px;background-color: #0fa612}
	.one-son1,.one-son2{ width: 100px;height: 100px; }
	
	/*
		1)当父元素未设置z-index属性，子元素设置了该属性，值大于等于 0 时，子元素的层级会高于父元
		素的层级，而当子元素的z-index属性值小于 0 时，子元素的层级会低于父元素的层级

		2)父元素设置了z-index属性，子元素未设置z-index属性，则无论父元素的z-index属性值为多少，子
		元素的层级永远高于父元素，子元素永远会挡住父元素

		3)父元素设置了z-index属性，子元素也设置了z-index属性，则无论子元素和父元素的z-index属性值
		为多少，子元素的层级永远高于父元素，子元素永远会挡住
	*/
	.one{
		position: relative;
		z-index: -3;
	}
	.one-son1{
		background-color: #145eff;
		position: relative;
		z-index: -5;
	}
	.one-son2{
		background-color: #ffec00;
		position: relative;
		left: 150px;
		top: 40px;
		z-index: -9;
	}
</style>
<div class="box">
	<div class="one">盒子
		<div class="one-son1">盒子-1</div>
		<div class="one-son2">盒子-2</div>
	</div>
</div>

效果:
在这里插入图片描述

子元素与其父元素外的其它元素之间

<style>
	.box{ width: 270px; height: 270px; border: 1px solid red; margin-left: 50px; }
	.one,.two{ width: 160px;height: 160px;}
	.one-son1{ width: 100px;height: 100px; }

	/*
		1)父元素未设置z-index属性，子元素z-index属性值与父元素的同级元素z-index属性值进行对比。因
		为是跟父元素的同级元素进行对比，且父元素未设置z-index，所以是以子元素的z-index属性值为准与
		父元素的同级元素进行对比，遵循z-index属性值大的元素，层级高规则，以及层级相同时，后面元素覆
		盖前面元素的规则

		2)父元素设置了z-index属性，子元素z-index属性值与父元素的同级元素z-index属性值进行对比。因
		为是跟父元素的同级元素进行对比，且父元素设置了z-index，所以是以父元素的z-index属性值为准与
		父元素的同级元素进行对比，同样遵循z-index属性值大的元素，层级高规则，以及层级相同时，后面元
		素覆盖前面元素的规则
	*/
	.one{
		background-color: #0fa612;
		position: relative;
		z-index: 5;
	}
	.one-son1{
		background-color: #145eff;
		position: relative;
		left: 30px;
		top: 20px;
		z-index: -3;
	}
	.two{
		background-color: #ffec00;
		position: relative;
		left: 80px;
		top: -80px;
		z-index: 3;
	}
</style>
<div class="box">
	<div class="one">盒子1
		<div class="one-son1">盒子-1</div>
	</div>
	<div class="two">盒子2</div>
</div>