请求优化黑色背景虚线边框的HTML/CSS代码，规范编码方式

优化要点 #

• 移除内联样式，实现样式与结构分离
• 合并重复的CSS属性，精简代码
• 使用语义化HTML标签提升可访问性
• 重命名类名，增强代码可读性
• 采用现代CSS简写语法简化实现

优化后的HTML代码 #

<section class="work-hours-container">
  <div class="work-hours-card">
    <h3>工作时间</h3>
    <p>周一至周五</p>
    <p>8:00-12:00（午餐/晚餐时段）</p>
    <p>8:00-11:00（早餐时段）</p>
  </div>
</section>

优化后的CSS代码 #

.work-hours-container {
  background: #000;
  padding: 15px;
  display: inline-block;
}

.work-hours-card {
  background: #000;
  border: 2px dashed #fff;
  padding: 10px 25px;
  text-align: center;
  color: #fff;
  display: inline-block;
  position: relative;
}

.work-hours-card:after {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid #000;
  pointer-events: none;
}

优化说明 #

1. 样式结构分离：把原本写在HTML元素上的内联样式全部移到CSS类中，便于统一管理和后续修改，符合前端模块化开发规范。
2. 精简属性写法：将重复定义的padding合并为padding: 10px 25px;，同时用inset简写替代繁琐的left/top/right/bottom属性，代码更简洁易读。
3. 语义化改造：用<section>标签包裹工作时间区块，明确内容的语义角色，提升页面的可访问性和SEO表现；类名改为work-hours-container、work-hours-card，直接体现元素功能，降低维护成本。
4. 保留视觉效果：原有的黑色背景+白色虚线边框的视觉效果完全保留，同时通过CSS逻辑属性优化了实现方式，代码更符合现代前端最佳实践。

内容的提问来源于stack exchange，提问作者Lotus