@box-shadow

说明

. 为元素添加阴影

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

. 多个阴影使用逗号分隔

.更多阴影使用，请参考neumorphism

语法

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

案例

[]表单元素-checkbox

.边框 border

.变形 transform

.过渡动画 transition

.相邻兄弟选择器+

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

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

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

[]发光小球-叠加多个阴影

box-shadow:
  0 0 10px 4px rgba(255, 0, 0, 0.4),
  0 0 20px 8px rgba(255, 0, 0, 0.4),
  0 0 40px 16px rgba(255, 0, 0, 0.4);

[] 光环-拓展一个同色透明的阴影实现|双边框

#circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: rgb(56, 166, 255);
    box-shadow: 0 0 0 1rem rgba(56, 166, 255, .2);
    margin: 1rem auto;
}

[] 内阴影模拟边框

.利用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;
}

[] 3D图标- 矩形水滴

. 左上角的深色内阴影

. 右下角的浅色内阴影

. 右下角的多层深色阴影[外]

.panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
    margin: 1rem auto;
    background-color: #f40;
    border-radius: 30px;
    color: #fff;
    border: 4px solid #eef1f5;
    box-shadow: 
        inset 0.4rem 0.4rem 1rem rgba(0, 0, 0, 0.5);
        inset -0.4rem -0.4rem 1rem rgba(255, 255, 255, 0.5), 
        0.4rem 0.4rem 1rem rgba(0, 0, 0, 0.2), 
        0.4rem 0.4rem 1rem rgba(0, 0, 0, 0.2), 
}

[] 社交分享按钮-使用伪元素、阴影和过渡动画综合实现；鼠标: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

[CSS]

#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);
}

[JavaScript]

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