介绍盒子阴影。引入中国色彩。感谢comehop??e的前端日常实战。我已经有100+的启蒙练习了，但这种练习并不是刻意针对我的薄弱环节，我还在——“哦，啊哈，我懂了（其实我不懂）”这一种自欺欺人的行为也得到了证实，我想总结一下与comehop??e不同的一般做法。github.com/shanyuhai1...代码解读先完成html结构

colorfulbuttons

insetbuttons

toprightbottom左上底左右所有

开始按钮

顶部右侧底部左上底左右全部

完成标题的样式body{margin:0;高度：100vh；字体：普通1em，无衬线；显示：弹性；对齐项目：居中；证明内容：居中；背景颜色：黑色；}h1，h2{字母间距：1px；文本对齐：居中；文本转换：大写；用户选择：无；}h1{字体大小：2em；颜色：#066；文字阴影：1px1pxrgba(255,255,255,0.7);}h2{背景：线性渐变(45deg,#dbdcd70%,#dddcd724%,#e2c9cc30%,#e7627d46%,#b8235a59%，#80135771%，#3d163584%,#1c1a27100%);-webkit-背景剪辑：文本；-webkit-text-fill-color:transparent;}连接将全部按钮button设置初始样式.button{font-size:16px;字体粗细：700；白颜色;/*默认*/text-transform:uppercase;背景：#d8d8d8；边框：2px实心；大纲：无；填充：1em2em；边距：0.5em；游标：指针；transition:all.6s,color.3s.4s;}.button:hover{color:#d8d8d8;}添加box-shadow的inset动画.button_top{color:#5c2223;border-image:linear-gradient(toright,#b92b27,#1565c0)11;box-shadow:inset02px1px0;}.button_top:hover{box-shadow:inset04em1px0#5c2223;}.button_right{color:#eba0b3;border-image:linear-gradient(toright,#c31432,#240b36)11;box-shadow:inset-2px01px0;}.button_right:hover{box-shadow:inset-8em01px0#eba0b3;}.button_bottom{color:#c8adc4;border-image:linear-gradient(toright,#b92b27,#1565c0)11;box-shadow:inset0-2px1px0;}.button_bottom:hover{box-shadow:inset0-4em1px0#c8adc4;}.button_left{颜色：#525288;border-image:linear-gradient(toright,#2980b9,#6dd5fa,#ffffff)11;box-shadow:inset2px01px0;}.button_left:hover{box-shadow:inset8em01px0#525288;}.button_tb{color:#131824;border-image:linear-gradient(toright,#8e2de2,#4a00e0)11;box-shadow:inset02px1px0,inset0-2px1px0;}.button_tb:hover{box-shadow:inset04em1px0#131824,inset0-4em1px0#131824;}.button_lr{颜色:#1e9eb3；border-image:linear-gradient(toright,#1f4037,#99f2c8)11;box-shadow:inset2px01px0,inset-2px01px0;}.button_lr:hover{box-shadow:inset8em01px0#1e9eb3,inset-8em01px0#1e9eb3;}.button_all{颜色:#45b787；边框图像：线性渐变（向右，#a80077，#66ff00）11；box-shadow:inset02px1px0,inset0-2px1px0,inset2px01px0,inset-2px01px0;}.button_all:hover{框阴影:inset04em1px0#45b787,inset0-4em1px0#45b787,inset8em01px0#45b787,inset-8em01px0#45b787;}再添加box-shadow的开头动画.buttons_outset.button{animation:2sease-in-outinfinite;}.buttons_outset.button_top{animation-name:shaking-top;}.buttons_outset.button_right{animation-name:shaking-right;}.buttons_outset.button_bottom{animation-name:shaking-bottom;}.buttons_outset.button_left{动画名称：左摇晃;}.buttons_outset.button_tb{动画名称：摇晃-tb;}.buttons_outset.button_lr{动画名称：摇晃-lr;}.buttons_outset.button_all{动画-name:shaking-all;}@keyframesshaking-top{50%{color:#d8d8d8;框阴影：0-2px1px0;背景：#5c2223；}}@keyframes向右摇晃{50%{颜色：#d8d8d8；框阴影：2px01px0；背景：#eba0b3；}}@keyframes摇底{50%{颜色：#d8d8d8;框阴影：02px1px0；背景：#c8adc4;}}@keyframesshaking-left{50%{颜色：#d8d8d8;框阴影：-2px01px0；背景：#525288；}}@keyframesshaking-tb{50%{颜色：#d8d8d8；-阴影：0-2px1px0,02px1px0;背景：#131824；}}@keyframesshaking-lr{50%{颜色：#d8d8d8；框阴影：-2px01px0,2px01px0;背景：#1e9eb3；}}@keyframes全部摇晃{50%{颜色：#d8d8d8；框阴影：0-2px1px0,02px1px0,-2px01px0,2px01px0;背景：#45b787；}}最后，我真的缺乏审美。我好丑欢迎大家补充box-shadow属性的使用，指出我写的不规范的地方和更好的写法。