::cue伪元素用于自定义视频字幕样式，通过video::cue设置颜色、字体、背景等外观，支持按WebVTT类名或ID细化样式，如video::cue(.highlight)高亮特定字幕，常用属性包括color、background、font...

合理使用:optional和:required伪类可直观区分表单必填与选填项。1.通过不同边框颜色（如红色表示必填，灰色表示可选）实现视觉区分；2.利用label:has(input:required)::after添加红色星号提示，...

浮动布局源于文本环绕图片的需求，后被用于多列布局但存在高度塌陷、清除浮动等维护难题；2.弹性盒子（Flexbox）是专为一维布局设计的现代方案，通过父容器控制子元素排列、对齐与伸缩，逻辑清...

CSS列表美化需先清除默认样式，再通过list-style:none、::before伪元素、Flexbox/Grid布局及响应式设计提升视觉效果与用户体验。

使用:checked伪类可自定义复选框样式，通过隐藏原始输入框，结合label关联和CSS伪元素实现视觉效果。首先将input[type='checkbox']设为opacity:0以隐藏，利用label的for属性与其id关联，点击lab...

使用background-clip:border-box可实现渐变边框，通过设置背景渐变并裁剪至边框区域，配合border-radius保持圆角效果，现代浏览器支持良好；2.伪元素方案利用::before或::after创建定位层模拟边...

::backdrop伪元素可在全屏或模态状态下为元素（如）自动生成背景层，无需额外HTML即可设置半透明遮罩或模糊效果，提升视觉焦点与用户体验。

使用CSS:before伪元素结合content属性可在不修改HTML的情况下为元素添加图标。1.基本语法中，:before在元素内容前插入虚拟子元素，通过content定义内容，如.text:before{content:'★';}可插入星...

浮动元素宽高由内容决定，未设尺寸时收缩包裹内容，父容器易高度塌陷；需用clearfix或BFC解决；margin不合并但需防溢出；混用布局时易错位，现代开发推荐Flex或Grid替代。

使用CSS的@mediaprint和::after伪元素可在打印时显示链接地址，如a::after{content:'('attr(href)')';}，仅对外部链接显示可加属性选择器，配合word-wrap和字体调整优化布局，通过打印预览测试...

使用CSS伪元素、background叠加或mask-image可实现图片渐变蒙版。伪元素通过绝对定位叠加渐变层，适合内容图片；background将渐变与图片结合，适用于背景图；mask-image支持精细透明控制，需注...

使用CSSGrid可高效实现等宽等高网格布局，通过display:grid、grid-template-columns/rows定义行列结构，结合repeat()、fr单位和gap控制尺寸与间距；响应式场景下可用auto-fit配合minmax()自动换...

清除浮动可解决父容器高度塌陷问题，通过为父容器添加clearfix类并利用::after伪元素插入不可见块级元素，设置clear:both实现，无需额外标签，兼容性好，常用于传统浮动布局的修复。

使用HTML的details和summary标签可实现无需JavaScript的可折叠面板，默认收起，点击summary展开内容，支持open属性默认展开，配合CSS可自定义样式如添加箭头图标、边框等，主流浏览器兼容性良好...

通过transition实现边框颜色渐变，鼠标悬停时border-color平滑过渡；2.改变border-width实现边框扩张动画，从无到有扩展边框宽度；3.使用伪元素::before或::after模拟边框，结合transform和bord...

使用clearfix或display:flow-root可解决浮动导致的父元素高度塌陷，前者通过伪元素清除浮动，后者触发BFC包含浮动子元素。