- 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>css">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>css">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 为阴影的 范围，pxd 为 颜色参数常用 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>css">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>css">.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>css">.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>css">.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>
效果:
