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() 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
祝你好运......
答案 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属性下添加高度。