盒阴影

@box-shadow

. 为元素添加阴影 - adds shadow effects around an element's frame

. 多个阴影使用逗号,分隔 - separated by commas

. 阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0

. 可以创建普通阴影、发光、分身、模拟边框都多种特效

. 更多阴影使用，请访问 MDN - box-shadow、Neumorphism

可以把阴影当作一个元素本身的孵化器

box-shadow: h-shadow v-shadow blur spread color inset;

普通阴影

[] 课程主页 3D图标

. 内阴影

. 外阴影

. 多重阴影

发光阴影

. 水平偏移和垂直偏移为0

[] 按钮

. 静态时，使用1个发光阴影

. 鼠标 :hover 时，指定同色背景，并叠加多个同色阴影

. 过渡动画 transition

hover

.glow {
  border-radius: 30px;
  padding: 4px 30px;
  border: 2px solid var(--color);
  box-shadow: 0 0 10px var(--color);
  color: var(--color);
}

.glow:hover {
  color: #fff;
  background-color: var(--color);
  box-shadow:
    0 0 10px var(--color),
    0 0 20px var(--color),
    0 0 40px var(--color);
}

分身阴影

. 不指定模糊和扩展

. 使用一个或多个阴影模拟多个元素

. 可以配合伪元素使用

[] 个人网站 - 标题条

. 伪元素和阴影配合使用

. 扩展分身 spread

[] 汉堡菜单

. 分别向上、向下扩展/投射一个阴影；也可以使用伪元素实现，见后例

.ham-menu {
    width: 40px;
    height: 4px;
    background-color: #fff;
    box-shadow: 0 -10px #fff, 0 10px #fff;
}

[] 分身

. 4个方向的阴影

. 过渡动画

.more:hover {
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.8),
    30px 30px rgba(255, 0, 0, 0.8),
    -30px -30px rgba(255, 0, 0, 0.8),
    -30px 30px rgba(255, 0, 0, 0.8),
    30px -30px rgba(255, 0, 0, 0.8);
}

[] 光环符号 - 集成开发环境

. 伪元素和阴影配合使用

. 拓展 spread 一个同色透明的阴影实现|双边框

.list-item:hover::before {
  box-shadow: 0 0 0 4px rgba(75, 194, 206, 0.4);
}

模拟边框

. 在扩展的基础上，使用一个阴影

[] 表单元素 - checkbox

. 边框 border

. 变形 transform

. 过渡动画 transition

. 相邻兄弟选择器+

. 其它设计方案见 form 样式一节

[] 如果使用 <label> 包裹 <input>，请移除 for 属性

[] 请使用 outline 相关属性实现

[] 内阴影模拟边框

. 利用z-index叠放在下面；不能设置父级容器背景颜色

[] 透明边框特效

. 用白色遮盖

.img-bs {
  box-shadow:
    0 0 0 10px #890,
    0 0 0 35px #fff,
    40px 40px #f40,
    -40px -40px #f40;
  margin: 6rem auto;
}

更多案例

[] 社交分享按钮

. 使用伪元素、阴影和过渡动画综合实现

. 鼠标:hover查看效果

.share .icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    transform: scale(0.8);
    transition: .5s;
}
        
.share .icon:hover::before {
    box-shadow: 0 0 1rem 2px #e1251b;
    transform: scale(1.2);
}

[] 汉堡菜单

. 本例采用利用伪元素和阴影实现

. 单击更换css类

其它方案

. 使用编码字符☰[去掉空格]来代替☰

. 使用字体图标实现

. 使用js

#ham {
    position: relative;
    width: 50px;
    height: 50px;
    background-color: #38a6ff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem auto;
}

#ham::before {
    content: '';
    position: absolute;
    width: 28px;
    height: 2px;
    background-color: #fff;
    transform: translateY(-10px);
    box-shadow: 0 10px 0 #fff;
    transition: .2s;
}

#ham::after {
    content: '';
    position: absolute;
    width: 28px;
    height: 2px;
    background-color: #fff;
    transform: translateY(10px);
    transition: .2s;
}

#ham.ham-active {
    background-color: #e1251b;
}

#ham.ham-active::before {
    box-shadow: unset;
    transform: translateY(0px) rotateZ(45deg);
}

#ham.ham-active::after {
    transform: translateY(0px) rotateZ(-45deg);
}

let ham = document.querySelector('#ham')
ham.addEventListener('click', () => {
    ham.classList.toggle('ham-active')
})