Question

我有一个矩形容器，边框半径为30px。这是为了使它的侧面有半圆而不是扁平线。不幸的是，这导致边界在靠近顶部或底部时变薄，而到达顶部和底部时则变薄。

关于我能做什么的任何想法？

#TRLPipe {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  height: 60px;
  align-content: stretch;
  background-color: white;
  border-radius: 30px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin: 0 0 20px 0;
  padding: 0 30px 0 30px;
  border-left: 5px solid #e4dfec;
  border-right: 5px solid #4f0072;
}

<div class="container" id="TRLPipe">
  <div class="TRLButton" id="TRL1">
    TRL 1
  </div>
  <div class="TRLButton" id="TRL2">
    TRL 2
  </div>
  <div class="TRLButton" id="TRL3">
    TRL 3
  </div>
  <div class="TRLButton" id="TRL4">
    TRL 4
  </div>
  <div class="TRLButton" id="TRL5">
    TRL 5
  </div>
  <div class="TRLButton" id="TRL6">
    TRL 6
  </div>
  <div class="TRLButton" id="TRL7">
    TRL 7
  </div>
  <div class="TRLButton" id="TRL8">
    TRL 8
  </div>
  <div class="TRLButton" id="TRL9">
    TRL 9
  </div>
</div>

I need the borders to match up all around

Answer 1

也许可以用box-shadow而不是边界半径切换到inset：

#TRLPipe {
  ...
  box-shadow: inset 0 0 0 3px orange, 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  ...
}

#TRLPipe {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  height: 60px;
  align-content: stretch;
  background-color: white;
  border-radius: 30px;
  box-shadow: inset 0 0 0 3px orange, 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin: 0 0 20px 0;
  padding: 0 30px 0 30px;
}

.TRLButton {
  border-top: 3px solid red;
  border-bottom: 3px solid red;
}

<div class="container" id="TRLPipe">
  <div class="TRLButton" id="TRL1">
    TRL 1
  </div>
  <div class="TRLButton" id="TRL2">
    TRL 2
  </div>
  <div class="TRLButton" id="TRL3">
    TRL 3
  </div>
  <div class="TRLButton" id="TRL4">
    TRL 4
  </div>
  <div class="TRLButton" id="TRL5">
    TRL 5
  </div>
  <div class="TRLButton" id="TRL6">
    TRL 6
  </div>
  <div class="TRLButton" id="TRL7">
    TRL 7
  </div>
  <div class="TRLButton" id="TRL8">
    TRL 8
  </div>
  <div class="TRLButton" id="TRL9">
    TRL 9
  </div>
</div>

Answer 2

您可以在两侧使用::before和::after元素，并使用.TRLButton元素隐藏访问边框：

#TRLPipe {
  position: relative;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  height: 60px;
  border-radius: 30px;
  align-content: stretch;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin: 0 0 20px;
  padding: 0 30px;
}

#TRLPipe::before, #TRLPipe::after {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  border-radius: 30px;
  border-style: solid;
  border-width: 5px;
  background: white;
  content: '';
}

#TRLPipe::before {
  left: -1px;
  border-color: #e4dfec;
}

#TRLPipe::after {
  right: -1px;
  border-color: #4f0072;
}

.TRLButton {
  flex: 1;
  position: relative;
  z-index: 1;
  background: white;
  border-style: solid;
  border-width: 5px 0;
  border-color: gold;
}

<div class="container" id="TRLPipe">
  <div class="TRLButton" id="TRL1">
    TRL 1
  </div>
  <div class="TRLButton" id="TRL2">
    TRL 2
  </div>
  <div class="TRLButton" id="TRL3">
    TRL 3
  </div>
  <div class="TRLButton" id="TRL4">
    TRL 4
  </div>
  <div class="TRLButton" id="TRL5">
    TRL 5
  </div>
  <div class="TRLButton" id="TRL6">
    TRL 6
  </div>
  <div class="TRLButton" id="TRL7">
    TRL 7
  </div>
  <div class="TRLButton" id="TRL8">
    TRL 8
  </div>
  <div class="TRLButton" id="TRL9">
    TRL 9
  </div>
</div>

Answer 3

我会像这样用新的子元素创建端盖：

<div class="container" id="TRLPipe">
  <div class="TRLCap" id="leftCap"></div>
  ...
  <div class="TRLCap" id="rightCap"></div>
</div>

然后，所有的大写字母和按钮都是一个flex容器中的兄弟元素。此时，您可以控制这些兄弟姐妹的边框样式。

容器不需要边框，只需边框半径和阴影即可

#TRLPipe {
  display: flex;
  flex-direction: row;
  flex-wrap:nowrap;
  justify-content: center;
  align-items: stretch;
  align-content: stretch;
  height: 60px;
  border-radius: 30px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin: 0;
  padding: 0;
  border: 0;
}

按钮和大写字母具有默认值：

.TRLButton, .TRLCap {
  flex:1 0 auto;
  background-color: white;
  margin: 0;
  padding: 1em 0;
  border-top: 5px solid #808080; // default color
  border-bottom: 5px solid #808080; // default color
  font-family:'Arial',sans-serif;
  text-align:center;
  vertical-align:middle;
}
.TRLCap {
  flex:0 0 30px;
  border-radius: 30px;
}

左帽为浅紫色，右侧没有边框或半径：

#leftCap {
  border: 5px solid #e4dfec;
  border-top-right-radius:0;
  border-bottom-right-radius:0;
  border-right:none;
}

右帽为深紫色，左侧没有边框或半径：

#rightCap {
  border: 5px solid #4f0072;
  border-top-left-radius:0;
  border-bottom-left-radius:0;
  border-left:none;
}

每个按钮都有顶部和底部边框颜色：

#TRL1 {
  border-top: 5px solid #e4dfec;
  border-bottom: 5px solid #e4dfec;
}
...
#TRL9 {
  border-top: 5px solid #4f0072;
  border-bottom: 5px solid #4f0072;
}

查看我的JSBIN：http://jsbin.com/kopanoj/edit?html,css,output

边界半径导致实线边界变稀

3 个答案: