使用配合CSS可灵活创建长条矩形：一、固定宽高纯色；二、响应式视口百分比；三、伪元素无DOM生成；四、圆角阴影美化；五、Flex布局内嵌对齐。
如果您希望在网页中插入一个长条形的矩形元素，HTML5 提供了语义化与结构化的方式，但实际呈现依赖于 CSS 控制尺寸与视觉样式。使用 通过设置 div 的 width 和 height 属性，并指定 background-color，可生成一个无内容的长条矩形块。该方法适用于需要精确控制尺寸与位置的场景。 1、在 HTML 文件的 body 内添加一个空的 2、在 立即学习“前端免费学习笔记（深入）”； 3、保存文件并在浏览器中刷新查看效果，此时页面将显示一条宽 300 像素、高 24 像素、蓝色背景的长条矩形。 当需要长条随屏幕宽度动态伸缩时，可采用 vw 或 % 单位定义宽度，保持高度固定或按比例缩放，确保在不同设备上维持长条形态。 1、编写 HTML 结构：。 2、添加 CSS 规则：.responsive-bar { width: 80vw; height: 16px; background-color: #ff6b6b; }。 3、该长条将占据视口宽度的 80%，高度恒为 16 像素，背景为珊瑚红色。 若需避免额外 DOM 节点或实现装饰性长条（如分隔线、进度提示），可通过 :before 或 :after 伪元素生成矩形，不依赖真实子元素。 1、创建一个容器 div：。 2、为其添加伪元素样式：.bar-container::before { content: ""; display: block; width: 100%; height: 8px; background-color: #2ecc71; }。 3、此方式使容器自身无需设置背景或尺寸，所有视觉表现由伪元素承担。 为提升视觉层次，可在基础长条上叠加 border-radius 和 box-shadow 属性，使其呈现现代 UI 风格的长条元素。 1、定义 HTML：。 2、编写 CSS：.styled-bar { width: 400px; height: 32px; background-color: #9b59b6; border-radius: 16px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }。 3、渲染结果为一条紫罗兰色、两端半圆、略带投影的长条矩形。 当长条需作为布局组件嵌入弹性容器（如导航栏、卡片头部）时，利用 flex 属性可精准控制其在父容器中的尺寸分配与对齐方式。 1、构建 flex 容器： 2、设置容器为 flex：.flex-container { display: flex; align-items: center; }。 3、设定长条样式：.flex-bar { width: 200px; height: 12px; background-color: #f39c12; flex-shrink: 0; }。一、使用 div 设置固定宽高与纯色背景
二、使用 div 设置响应式长条（基于视口百分比）
三、使用 div 配合伪元素绘制无 HTML 内容的长条
四、使用 div 设置带圆角与阴影的长条矩形
五、使用 div 与 flex 容器内嵌长条并控制对齐
