、

）应用 CSS 样式。

直接用 border 写实线边框

最基础也最常用的写法：在元素的 style 属性里写 border: 1px solid #000;。其中三个值缺一不可：

• 1px：边框粗细（可换为 2px、0.5rem 等）
• solid：边框样式，solid 就是实线（别写成 “solid” 或 ‘solid’，CSS 里不用引号）
• #000：颜色（可写 red、rgb(0,0,0)、transparent 等）

示例：

有实线边框

用 class 配合外部 CSS 更规范

内联 style 适合快速调试，但项目中推荐用 class 分离结构与样式：

立即学习“前端免费学习笔记（深入）”；

• HTML 中：

  段落加边框

• CSS 中（


  或 .css 文件）：

  .bordered { border: 1px solid #ccc; }

• 注意：如果元素默认是 display: inline（如 ），border 会生效但可能不显眼——因为 inline 元素的上下边框不影响行高，左右边框才明显；此时可加 display: inline-block; 或改用
  等块级元素

  只设某一边的实线边框（比如下划线效果）

  不需要四边都画，可以用单侧属性精准控制：

  • border-bottom: 1px solid #e0e0e0; —— 常用于菜单项、输入框下划线
  • border-left: 2px solid #007bff; —— 适合作为强调色竖条
  • 慎用 border-top 给
    

    加顶线：部分浏览器默认 margin 会和边框重叠，建议同时设 margin-top: 0; 避免意外间距

  遇到边框不显示？先检查这三处

  实线边框“消失”通常不是 HTML5 的问题，而是 CSS 应用失败：

  • 元素本身 width 或 height 为 0（比如空
    ），或内容被 visibility: hidden / display: none 隐藏

  • CSS 选择器权重不够，被其他规则覆盖（用浏览器开发者工具检查 computed 样式，看 border 是否被 strike-through）
  • 写了 border-style: none; 或 border: 0; 在更早的样式里，它们会清掉所有边框（0 不等于 0px，它是关键字，表示“无边框”）

  边框是视觉层的细节，但依赖盒模型、渲染流和层叠规则。写 border 很简单，让它稳定出现在该出现的位置，得盯住上下文。

  发表于：运维

  五天前

  # border# class# css# display# html# html5# margin# red# 工具# 浏览器# 选择器

  复制链接