-
最稳妥解法是用高质量响应式poster图替代背景视频。通过三层媒体查询适配不同屏幕，以background-image加载并控制缩放定位，确保视觉连贯性；移除video标签避免兼容问题，必要时用picture实现源切换。
-
Bulma卡片组件通过语义化结构和响应式布局实现内容展示，结合自定义CSS优化间距、悬停效果及多端适配，提升视觉吸引力与用户体验。
-
纯边框网格的本质是用grid-gap配合透明背景和单向border“抠”出线条效果：gap设为所需线宽，容器设背景色作画布，border统一方向（如right/bottom），禁用background/padding防遮盖或撑开。
-
HTML用于构建网页结构、超链接、图像、表单和表格：一用<html><head><title><body><h1><p><ul><li>定义基础内容；二用<ahref>实现外链、内链及新页跳转；三用<imgsrcalt>嵌入图片并保障可访问性；四用<form><input><button>收集用户数据；五用<table><thead&
-
必须用if-else而非switch的场景是需范围判断或复杂逻辑；三元运算符仅适用于单表达式返回值，多语句或副作用操作必须用if-else。
-
translate()移动元素自身坐标原点，正值向右下、负值向左上；不触发重排，仅影响渲染层；常见问题包括被absolute定位或overflow:hidden覆盖；优先用于动画等无需改变文档流的场景。
-
transform居中更可靠，因margin:auto对绝对定位元素垂直方向无效，而translate(-50%,-50%)不依赖父高与子尺寸，且避免写死像素导致的错位。
-
-webkit-text-stroke是唯一被主流浏览器支持的文字描边方式，因原生text-stroke未标准化且未被任何引擎实现；Chrome、Edge、Safari支持该前缀属性，Firefox完全不支持，需搭配-webkit-text-fill-color:transparent使用，参数为widthcolor且顺序不可颠倒。
-
滚动进度条不能仅用CSS实现，因fixed元素width:100%相对于视口而非页面总高度，必须用JS监听scroll事件，结合requestAnimationFrame节流、缓存scrollHeight、处理iOSSafari兼容性及边界情况动态更新宽度。
-
深拷贝需根据场景选择方法：JSON方法简洁但不支持函数、循环引用等；手动递归可定制但复杂；结构化克隆支持多数内置对象但异步；Lodash最稳定但增加依赖。
-
本文介绍如何通过递归遍历DOM树，将任意HTML片段准确拆解为{text:"..."}和{markup:"<tag>"}交替排列的对象数组，避免正则陷阱与节点顺序错乱问题，适用于富文本解析、编辑器内容序列化等场景。
-
content属性不能直接插入图片，因其仅支持字符串、attr()、counter()及有限url()，且url()方式无法设置尺寸、定位等样式；应使用background-image配合display和宽高控制伪元素图片。
-
本文介绍一种通过克隆图片并使用position:fixed实现无裁剪、可缩放的hover效果方案，兼顾容器overflow:auto的滚动功能，避免因transform:scale()导致的溢出裁剪问题。
-
flex-wrap必须显式设为wrap才能换行，因其默认值nowrap会导致子项强制单行溢出；配合flex-basis、flex-grow/shrink及媒体查询可实现可靠响应式布局。
-
本文详解如何通过纯HTML+CSS+内联SVG快速创建美观、自适应、无依赖的波浪形页面分隔区，适用于首页Banner下方、章节过渡等场景，无需第三方库，兼容主流浏览器。
