图片按钮 盒子标签 外部独立 CSS

<input type="image"> <div class="类名">内容</div>：网页万能容器盒子 2.html 头部引入：<link rel="stylesheet" href="文件名.css">

字体设置 2. 文字对齐 & 上下移动

p{ font-family:"幼圆","方正卡通简体",sans-serif;/*卡通圆润字体，你图片同款*/ font-size:40px;/*字号px*/ color:#fff;/*文字颜色，英文/十六进制/rgba*/ font-weight:bold;/*加粗*/ } 整体居中：父元素text-align:center; 文字靠左：删掉居中，text-align:left; 文字下移：margin-top:100px;（数值越大越靠下）

页面背景 + 半透明遮罩卡片 全屏图片 + 黑色阴影遮罩

body{ background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url("图片全名.jpg"); background-size:cover;/*铺满屏幕*/ background-position:center;/*图片居中*/ background-repeat:no-repeat;/*不平铺*/ min-height:100vh;/*高度占满全屏*/ } rgba(黑,黑,黑,透明度)：最后 0~1，数字越大阴影越深

卡片 5：盒子模型 + 立体阴影（重点） 盒子四大组成

1.width/height：内容宽高 2.padding：内边距（内容→盒子边框距离） 3.border：边框 4.margin：外边距（盒子→页面边缘，用来挪位置） .box{ width:450px;height:300px; margin:120px 0 0 40px;/*上 右 下 左，控制盒子位置：下120px、右40px*/ padding:30px; background:rgba(255,255,255,0.15);/*盒子半透明白底色*/ border:none; border-radius:12px;/*圆角*/ /*多层阴影实现悬浮立体感：x偏移 y偏移 模糊 颜色*/ box-shadow:0 4px 8px rgba(0,0,0,0.25),0 12px 25px rgba(0,0,0,0.18); box-sizing:border-box;/*宽高包含边框，不会撑大盒子*/ }

卡片 6：浏览器刷新不生效排查清单

保存：VS Code Ctrl+S（html、css 两个文件都要保存） 引入：html 正确写<link>引入 css 缓存：浏览器Ctrl+F5强制刷新（普通 F5 清不掉缓存） 语法：css 每个{}必须成对闭合

卡片 4：两种特效文字动画 呼吸闪光字（HELLO） 渐变流动彩虹字（welcome）

animation: twinkle 1.5s infinite alternate; @keyframes twinkle{ from{opacity:0.5;text-shadow:0 0 5px #fff;} to{opacity:1;text-shadow:0 0 30px #0b168f;} } background:线性渐变(七色); background-size:200% 100%; -webkit-background-clip:text;/*兼容Chrome*/ background-clip:text;/*标准属性，消除警告*/ color:transparent;/*文字透明，透出渐变*/ animation:rain 3s infinite linear;