- [cursor 鼠标](#cursor 鼠标)
- [outline 轮廓线](#outline 轮廓线)
- [filter 滤镜](#filter 滤镜)
- [z-index 堆叠层级](#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 |
向上改变大小 |
html
<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 |
轮廓呈突出状 |
html
<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度代表完整的色相环,回到初始颜色 |
html
<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 属性的子元素中起作用
,在其它元素中是不作用的
同级元素之间
html
<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>
效果:
父子元素之间
html
<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>
效果:
子元素与其父元素外的其它元素之间
html
<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>
效果: