回顾这段时间的收获
程序员文章站
2022-03-07 09:17:30
边框的阴影效果,可以在css中使用box-shadow来实现 属性值有X-shadow,Y-shadow,blur,spread,color,inset X-shadow是设置水平方向的阴影值,可为负数 Y-shadow是设置垂直方向的阴影值,可为负数 blur是设置阴影的模糊半径 spread是设 ......
边框的阴影效果,可以在css中使用box-shadow来实现
属性值有x-shadow,y-shadow,blur,spread,color,inset
x-shadow是设置水平方向的阴影值,可为负数
y-shadow是设置垂直方向的阴影值,可为负数
blur是设置阴影的模糊半径
spread是设置阴影的扩展半径,也可以说是阴影的尺寸
color是设置阴影的颜色
inset这个属性通常是不使用的,它指的是将边框的阴影效果改为内阴影
但样式中默认样式是外阴影
盒子模型的重叠样式
在想让盒子停留的大盒子里设置一个相对定位,使其受相对定位的管辖
之后于同一个盒子里设置两个款高相同的盒子
样式中给两个大小相同的盒子设置绝对定位,并设置背景颜色用于遮挡
被重叠的盒子,以 z-index 值的大小来确定谁被覆盖,数值大的在
上面
为了是鼠标放在盒子上能显示被覆盖的元素,所以我们用伪类hover来改
变鼠标覆盖之后的 z-index 值,使之前在上面的盒子z-index值小于下
面的盒子,这样之前被覆盖的元素便会将之前覆盖它的元素所覆盖
但此时之前被覆盖的元素z-index值大于其伪类的z-index却小于其原先的
z-index值,所以我们设置之前被覆盖的伪类的z-index值最大,让它一直
保持在最上面
上一篇: 学习前端开发需要掌握哪些技能,才能胜任前端开发岗位?
下一篇: CSS 笔记