layui横线：带标题的横线（含代码、案例）

layui横线：带标题的横线（含代码、案例）

• 官方文档：https://www.layui.com/doc/element/auxiliar.html

---

案例· 截图：

---

代码示下：

/* 分割线（含标题的分割线） */
.site-border-default fieldset{border-top: 1px solid #eee;}
.site-border-red fieldset{border-top: 1px solid #FF5722;}
.site-border-orange fieldset{border-top: 1px solid #FFB800;}
.site-border-green fieldset{border-top: 1px solid #009688;}
.site-border-cyan fieldset{border-top: 1px solid #2F4056;}
.site-border-blue fieldset{border-top: 1px solid #1E9FFF;}
.site-border-black fieldset{border-top: 1px solid #393D49;}

  <div class="site-border-green">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
      <legend class="layui-font-green">尊敬的会员,欢迎回来</legend>
    </fieldset>
  </div>

---

使用注意事项：

1. 可以新增定义父级元素，进行样式绑定（也可以直接绑定类名进行样式覆写。）
2. 其他，可以参考文档地址；
3. 其他，不再赘述。

---

以上就是关于“layui横线：带标题的横线（含代码、案例）”的全部内容。