Question

必须实施一个设计，我对如何实现边框设计感到困惑。附件是我试图实施的图片。

我试图找出如何基于选择我想要选择的过滤器类型来实现边框ui。这同样适用于其他两个选项卡。除非用户明确选择它，否则该选项不可见。我搜索过codepen.io但没有得到所需的结果。我知道这种类型的CSS存在，但是我无法获得特定的单词/术语来搜索它。

这是我到目前为止所做的工作

HTML

<div class="search_options_container">
  <div class="search_option_tab">
    <div class="option_header" data-filter-type="team">
      TEAM
      <br>
      <span>ALL</span>
    </div>
    <div class="option_header" data-filter-type="position">
      POSITION
      <br>
      <span>ALL</span>
    </div>
    <div class="option_header" data-filter-type="price">
      PRICE
      <br>
      <span>ALL</span>
    </div>
  </div>
  <div class="options_container">
    <span class="filter-option" data-option="All">All</span>
    <span class="filter-option" data-option="Option 1">Option 1</span>
    <span class="filter-option" data-option="Option 2">Option 2</span>
    <span class="filter-option" data-option="Option 3">Option 3</span>
    <span class="filter-option" data-option="Option 4">Option 4</span>
    <span class="filter-option" data-option="Option 5">Option 5</span>
  </div>
  <div class="options_container" ng-if="filter-position">
    <span class="filter-option" data-option="All">All</span>
    <span class="filter-option" data-option="Option 1">Option 1</span>
    <span class="filter-option" data-option="Option 2">Option 2</span>
    <span class="filter-option" data-option="Option 3">Option 3</span>
    <span class="filter-option" data-option="Option 4">Option 4</span>
    <span class="filter-option" data-option="Option 5">Option 5</span>
  </div>
  <div class="options_container" ng-if="filter-price">
    <span class="filter-option" data-option="All">All</span>
    <span class="filter-option" data-option="Option 1">Option 1</span>
    <span class="filter-option" data-option="Option 2">Option 2</span>
    <span class="filter-option" data-option="Option 3">Option 3</span>
    <span class="filter-option" data-option="Option 4">Option 4</span>
    <span class="filter-option" data-option="Option 5">Option 5</span>
  </div>
</div>

-

CSS

.search_options_container {
  text-align: center;
}
.search_option_tab {
  display: flex;
  padding-top: 6px;
}
.option_header {
  display: inline-block;
  width: 33.33%;
}
.options_container {
  display: block;
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  background: white;
  z-index: 1;
  padding-top: 6px;
  height: 180px;
  overflow: auto;
}
.options_container > .filter-option {
  display: inline-block;
  padding: 5px;
  border-bottom: 1px solid black;
  width: 80%;
}
.options_container > .filter-option:last-child {
  border-bottom: none;
}

P.S： - 我已经根据我认为合适的情况将照片改写成所需的细节。如果您想要整张照片，请告诉我。

另外，我知道你们中的一些人可能会说出显示边框实现的代码在哪里。我对此的回应是因为我无法切割两个div之间边界的一小部分，即价格标签和它的选项之间的合并，我根本没有实现。

Answer 1

这是一个解决方案，您可以将标签向下移动1个像素，当它们获得背景时，它们将覆盖下方的边框。请参阅CSS中的注释。

＆＃13;

.search_options_container {
  text-align: center;
}
.search_option_tab {
  display: flex;
  padding-top: 6px;
  position: relative;                      /*  added so z-index work       */
  z-index: 2;                              /*  put tab's in a higher layer */
}
.option_header {
  display: inline-block;
  width: 33.33%;
  transform: translateY(1px);              /*  push the tabs 1px down so they
                                               cover the below border */
}
.option_header[data-filter-type="team"] {  /*  added new rule  */
  border: 1px solid red;
  border-bottom: none;
  background: lightgray;
}
.options_container {
  display: block;
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  background: white;
  z-index: 1;
  padding-top: 6px;
  height: 180px;
  overflow: auto;
  border: 1px solid red;                    /*  added  */
  background: lightgray;                    /*  added  */
}

.options_container > .filter-option {
  display: inline-block;
  padding: 5px;
  border-bottom: 1px solid black;
  width: 80%;
}
.options_container > .filter-option:last-child {
  border-bottom: none;
}

＆＃13;

<div class="search_options_container">
  <div class="search_option_tab">
    <div class="option_header" data-filter-type="team">
      TEAM
      <br>
      <span>ALL</span>
    </div>
    <div class="option_header" data-filter-type="position">
      POSITION
      <br>
      <span>ALL</span>
    </div>
    <div class="option_header" data-filter-type="price">
      PRICE
      <br>
      <span>ALL</span>
    </div>
  </div>
  <div class="options_container">
    <span class="filter-option" data-option="All">All</span>
    <span class="filter-option" data-option="Option 1">Option 1</span>
    <span class="filter-option" data-option="Option 2">Option 2</span>
    <span class="filter-option" data-option="Option 3">Option 3</span>
    <span class="filter-option" data-option="Option 4">Option 4</span>
    <span class="filter-option" data-option="Option 5">Option 5</span>
  </div>
  <div class="options_container" ng-if="filter-position">
    <span class="filter-option" data-option="All">All</span>
    <span class="filter-option" data-option="Option 1">Option 1</span>
    <span class="filter-option" data-option="Option 2">Option 2</span>
    <span class="filter-option" data-option="Option 3">Option 3</span>
    <span class="filter-option" data-option="Option 4">Option 4</span>
    <span class="filter-option" data-option="Option 5">Option 5</span>
  </div>
  <div class="options_container" ng-if="filter-price">
    <span class="filter-option" data-option="All">All</span>
    <span class="filter-option" data-option="Option 1">Option 1</span>
    <span class="filter-option" data-option="Option 2">Option 2</span>
    <span class="filter-option" data-option="Option 3">Option 3</span>
    <span class="filter-option" data-option="Option 4">Option 4</span>
    <span class="filter-option" data-option="Option 5">Option 5</span>
  </div>
</div>

＆＃13;

更新

如果您只想围绕＆＃34; ALL＆＃34;文字，只需将其元素更改为div，删除<br>并更改此CSS规则

.option_header[data-filter-type="team"]

到

.option_header[data-filter-type="team"] div

Stack snippet

＆＃13;

.search_options_container {
  text-align: center;
}
.search_option_tab {
  display: flex;
  padding-top: 6px;
  position: relative;                          /*  added so z-index work       */
  z-index: 2;                                  /*  put tab's in a higher layer */
}
.option_header {
  display: inline-block;
  width: 33.33%;
  transform: translateY(1px);                  /*  push the tabs 1px down so they
                                               cover the below border */
}
.option_header[data-filter-type="team"] div {  /*  added new rule  */
  border: 1px solid red;
  border-bottom: none;
  background: lightgray;
}
.options_container {
  display: block;
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  background: white;
  z-index: 1;
  padding-top: 6px;
  height: 180px;
  overflow: auto;
  border: 1px solid red;                       /*  added  */
  background: lightgray;                       /*  added  */
}

.options_container > .filter-option {
  display: inline-block;
  padding: 5px;
  border-bottom: 1px solid black;
  width: 80%;
}
.options_container > .filter-option:last-child {
  border-bottom: none;
}

＆＃13;

<div class="search_options_container">
  <div class="search_option_tab">
    <div class="option_header" data-filter-type="team">
      TEAM
      <div>ALL</div>
    </div>
    <div class="option_header" data-filter-type="position">
      POSITION
      <div>ALL</div>
    </div>
    <div class="option_header" data-filter-type="price">
      PRICE
      <div>ALL</div>
    </div>
  </div>
  <div class="options_container">
    <span class="filter-option" data-option="All">All</span>
    <span class="filter-option" data-option="Option 1">Option 1</span>
    <span class="filter-option" data-option="Option 2">Option 2</span>
    <span class="filter-option" data-option="Option 3">Option 3</span>
    <span class="filter-option" data-option="Option 4">Option 4</span>
    <span class="filter-option" data-option="Option 5">Option 5</span>
  </div>
  <div class="options_container" ng-if="filter-position">
    <span class="filter-option" data-option="All">All</span>
    <span class="filter-option" data-option="Option 1">Option 1</span>
    <span class="filter-option" data-option="Option 2">Option 2</span>
    <span class="filter-option" data-option="Option 3">Option 3</span>
    <span class="filter-option" data-option="Option 4">Option 4</span>
    <span class="filter-option" data-option="Option 5">Option 5</span>
  </div>
  <div class="options_container" ng-if="filter-price">
    <span class="filter-option" data-option="All">All</span>
    <span class="filter-option" data-option="Option 1">Option 1</span>
    <span class="filter-option" data-option="Option 2">Option 2</span>
    <span class="filter-option" data-option="Option 3">Option 3</span>
    <span class="filter-option" data-option="Option 4">Option 4</span>
    <span class="filter-option" data-option="Option 5">Option 5</span>
  </div>
</div>

＆＃13;

Answer 2

这是我的方法，...我添加了一些新的CSS规则，并且还覆盖了一些CSS代码。这将在每个标签上方创建一个飞行框。有了这个，我想你可以展示类似于白色区域背后的单词“ALL”的图片。

注意：您当前和活动的option_header必须接收活动类。

.search_options_container {
    text-align: center;
}
.search_option_tab {
    display: flex;
    padding-top: 6px;
}
.option_header {
    display: inline-block;
    width: 33.33%;
    position: relative; /* added : makes childs to be relative */
}

/* === Add === */
.option_header span{
    position:relative; /* makes sure z-index works for them */
    z-index:3;         /* brings span (element with word "ALL") in tabs to front  */
} 
.option_header.active:after{
    content: ' ';      /* must defined in order to render after element */ 
    position: absolute;
    background-color: #fff;
    border: 2px solid purple;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    height: 25px;      /* a number that is related to height of tabs */

    /* optional : add space to left and right */
    right: 30px;       
    left: 30px; 

    /* optional: if you don't want that you can add width 
    left:0;
    width:100%; */

    bottom: -2px;      /* shifts the element 2 pixels down ( 2px = width of the border) */
    z-index: 2;        /* brings 1 layer in front */
}
/* === End of Add === */

.options_container {
    display: block;
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    background: white;
    z-index: 1;
    padding-top: 6px;
    height: 180px;
    overflow: auto;

    /* === Add === */
    border:2px solid purple;
    border-radius:10px; 
    right:10px;         /* optional, adds small distance from right */
    left:10px;          /* not required, adds small distance from left */
    width:auto;         /* if you don't use left and right, remove this. */
}
.options_container > .filter-option {
    display: inline-block;
    padding: 5px;
    border-bottom: 1px solid black;
    width: 80%;
}
.options_container > .filter-option:last-child {
    border-bottom: none;
}

希望它可以帮到你

需要有关实施边框设计的帮助

HTML

CSS

2 个答案: