CSS—fieldset只有标题一条边框，左右下都无边框（图文详情）

最新推荐文章于 2021-08-03 18:01:26 发布

原创

最新推荐文章于 2021-08-03 18:01:26 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #field

本文介绍了如何使用CSS实现fieldset元素只显示顶部边框，而隐藏左右下边框的效果，详细步骤包括布局和样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS—fieldset只有标题一条边框，左右下都无边框

第一步：布局

<div class="field">
      <fieldset>
        <legend>第三方登录</legend>
        <ul>
          <li v-for="(item, index) in datafieldset">
            <img :src="item.pic" alt="">
          </li>
        </ul>
      </fieldset>
    </div>

在这里插入图片描述

第二步：css样式

.field{
      padding: 0 40/@r;
      box-sizing: border-box;
    // 最好在fieldset外侧包裹一个div，因为我单独给fieldset设置padding是没效果的
      fieldset{
        border-top: 1px solid #e7e7e7;
        border-left： none；
	 border-right： none；
 	 border-bottom： none；
 	 //把左右下边框全部设置none即可
        // 如果
        legend{
          font-size: 24/@r;
          text-align: center;
          color: #a2a2a2;
          padding: