12 个答案:

答案 0 :(得分：60)

我有另一种可能性。这当然是一种“更新”的技术，但对我的项目来说已经足够了。

只有在需要一个或两个边框时才有效。我从来没有用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

}

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

答案 1 :(得分：50)

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

通过将单元格的内容包装在中，并对其应用高度/边框样式，可以达到相同的效果。或者通过在1像素宽的PNG中绘制一条正确高度的短垂直线，并将其作为背景应用于单元格：

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

答案 2 :(得分：47)

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

border-right: 1px solid;

line-height: 10px;

答案 3 :(得分：6)

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

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

列表项的示例：

li {

list-style: none;

padding: 0 10px;

display: inline-block;

border-right: 1px solid #000;

line-height: 5px;

margin: 20px 0;

}

• cats
• dogs
• birds
• swine!

答案 4 :(得分：4)

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

答案 5 :(得分：1)

table {

border-spacing: 10px 0px;

}

.rightborder {

border-right: 1px solid #fff;

}

然后使用您的代码：

whatever

希望有所帮助！

答案 6 :(得分：0)

这将在单元格的左侧添加一个居中边框，该边框为单元格高度的80％。您可以在此处引用完整的border-image documentation。

table td {

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

}

答案 7 :(得分：0)

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

答案 8 :(得分：0)

在@ ReBa的答案之上，这个custom-border课程对我有用。

MODS的：

使用border 代替 backaground-color，因为background-color不一致。

设置height＆amp; top的{​​{1}}属性:after，其总数达到100%，其中bottom的值为隐式

＆＃13;

＆＃13;

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;

}＆＃13;

• Hello

• World

• Foo

• Bar
• Baz

＆＃13;＆＃13;＆＃13;

祝你好运......

答案 9 :(得分：0)

就像其他人说的那样，您无法控制边框高度。

但是有解决方法，这是我的工作：

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%表示半边框。

答案 10 :(得分：0)

.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;

}

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

答案 11 :(得分：-1)

table td {

border-right:1px solid #000;

height: 100%;

}

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