CSS上的边框高度

Question

我有一个TD表，在它右边我想添加一个1像素边框，所以我做到了这一点：

table td {
    border-right:1px solid #000;
}

它工作正常，但问题是边框的高度取TD的总高度。

有没有办法设置边框的高度？

Answer 1

不，没有。边框总是和元素一样高。

您可以通过将单元格的内容包装在<span>中，并将高度/边框样式应用于此来实现相同的效果。或者通过在1像素宽的PNG（一个正确的高度）中绘制一条短垂直线，并将其作为背景应用于单元格：

background:url(line.png) bottom right no-repeat;

Answer 2

这将在单元格的左侧添加居中边框，该边框是单元格高度的80％。你可以在这里参考完整的border-image documentation。

table td {
    border-image: linear-gradient(transparent 10%, blue 10% 90%, transparent 90%) 0 0 0 1 / 3px;
}

Answer 3

就像其他人说的一样，你无法控制边界高度。但有一些解决方法，这就是我的工作：

table {
  position: relative;
}

table::before { /* ::after works too */
  content: "";
  position: absolute;
  right: 0; /* Change direction for a different side*/
  z-index: 100; 
  width: 3px; /* Thickness */
  height: 10px;
  background: #555; /* Color */
}

您可以将height设置为inherit以获得表格的高度，或者将calc(inherit - 2px)设置为2px较小的边框。请记住，未设置表高度时，inherit无效。

使用height: 50%作为半边框。

Demo

Answer 4

table td {
    border-right:1px solid #000;
    height: 100%;
}

只需在border属性下添加高度即可。

Answer 5

我有另一种可能性。这当然是一种“更新”的技术，但对我的项目来说工作充分。

它只适用于需要一个或两个边框的情况。我从来没有用4个边界做过......说实话，我还不知道答案。

.your-item {
  position: relative;
}

.your-item:after {
  content: '';
  height: 100%; //You can change this if you want smaller/bigger borders
  width: 1px;

  position: absolute;
  right: 0;
  top: 0; // If you want to set a smaller height and center it, change this value

  background-color: #000000; // The color of your border
}

我希望这对你也有帮助，对我来说，这是一个简单的解决方法。

Answer 6

是的，您可以在定义边框后设置线高，如下所示：

border-right: 1px solid;
line-height: 10px;

Answer 7

对于td元素，line-height将成功允许您调整边框高度，如SPrince所述。

对于其他元素（如列表项），可以使用line-height控制边框高度，使用margin-top和margin-bottom控制实际元素的高度。

以下是两个工作示例：http://jsfiddle.net/byronj/gLcqu6mg/

列表项的示例：

li { 
    list-style: none; 
    padding: 0 10px; 
    display: inline-block;
    border-right: 1px solid #000; 
    line-height: 5px; 
    margin: 20px 0; 
}

<ul>
    <li>cats</li>
    <li>dogs</li>
    <li>birds</li>
    <li>swine!</li>
</ul>

Answer 8

不，您无法设置边框高度。

Answer 9

table {
 border-spacing: 10px 0px;
}

.rightborder {
border-right: 1px solid #fff;
}

然后使用您的代码，您可以：

<td class="rightborder">whatever</td>

希望有所帮助！

Answer 10

目前，不，不是没有诉诸欺骗。元素上的边界应该运行它们适用的元素框的任何一侧的整个长度。

Answer 11

.main-box{  
    border: solid 10px;
}
.sub-box{
    border-right: 1px solid;
}

//在框的右侧绘制一条线。稍后添加margin-top和margin-bottom。即，

.sub-box{
    border-right: 1px solid;
    margin-top: 10px;;
    margin-bottom: 10px;
}

这可能有助于在盒子的右侧画一条线，顶部和底部有一个间隙。

Answer 12

Building on top of @ReBa's answer above, this custom-border class is what worked for me.

MODS的：

• 由于border不一致，与backaground-color而不是background-color合作。
• 设置height和top的:after属性的方式总和达到100%，其中bottom的值是隐含的。

ul {
  list-style-type: none;
  display: flex;
  flex-direction: row;
}

li {
  padding: 10px;
}

.custom-border {
  position: relative;
}

.custom-border:after {
  content: " ";
  position: absolute;
  border-left: 1px #6c757d solid;
  top: 35%;
  right: 0;
  height: 30%;
  margin-top: auto;
  margin-bottom: auto;
}

<ul>
  <li class="custom-border">
    Hello
  </li>
  <li class="custom-border">
    World
  </li>
  <li class="custom-border">
    Foo
  </li>
  <li class="custom-border">Bar</li>
  <li class="custom-border">Baz</li>
</ul>

祝好运...