CSS 有什么方法可以声明一个盒子的大小/部分边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8835142/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Any way to declare a size/partial border to a box?
提问by davidmatas
Any way to declare a size/partial border to a box in CSS? For example a box with 350pxthat only shows a border-bottom in its firsts 60px. I think that might be very useful.
有什么方法可以在 CSS 中声明一个框的大小/部分边框？例如，一个盒子350px只在它的 firsts 中显示一个 border-bottom 60px。我认为这可能非常有用。
Examples:
例子：
回答by bookcasey
Not really. But it's very easy to achieve the effect in a way that degrades gracefully and requires no superfluous markup:
并不真地。但是很容易以一种优雅降级的方式实现效果，不需要多余的标记：
div {
width: 350px;
height: 100px;
background: lightgray;
position: relative;
margin: 20px;
}
div:after {
content: '';
width: 60px;
height: 4px;
background: gray;
position: absolute;
bottom: -4px;
}<div></div>回答by yckart
I know, this is already solved and pixels were requested. However, I just wanted to share something...
我知道，这已经解决了，并且请求了像素。然而，我只是想分享一些东西......
Partly underlined text elements can easily achieved by using display:tableor display:inline-block
部分带下划线的文本元素可以通过使用display:table或display:inline-block
(I just don't use display:inline-blockbecause, yeah you know, the awkward 4px-gap).
（我只是不使用display:inline-block因为，是的，你知道，尴尬的4px-gap）。
Textual Elements
文本元素
h1 {
border-bottom: 1px solid #f00;
display: table;
}<h1>Foo is not equal to bar</h1>Centering, display:tablemakes it impossible to center the element with text-align:center.
Let's work around with margin:auto...
居中，display:table使元素无法居中text-align:center。
让我们解决margin:auto...
h1 {
border-bottom: 1px solid #f00;
display: table;
margin-left: auto;
margin-right: auto;
}<h1>Foo is not equal to bar</h1>Well, that's nice, but it's not partially.
As bookcaseyalready introduced, pseudo-elements are worth gold.
嗯，这很好，但不是部分。
正如bookcasey已经介绍的那样，伪元素值钱。
h1 {
display: table;
margin-left: auto;
margin-right: auto;
}
h1:after {
border-bottom: 1px solid #f00;
content: '';
display: block;
width: 50%;
}<h1>Foo is not equal to bar</h1>Offset, the underline is left aligned right now. To center it, just push the pseudo-element the half of its width(50% / 2 = 25%) to the right.
Offset，下划线现在左对齐。要将其居中，只需将伪元素width( 50% / 2 = 25%)的一半向右推。
h1 {
display: table;
margin-left: auto;
margin-right: auto;
}
h1:after {
border-bottom: 1px solid #f00;
content: '';
display: block;
margin-left: 25%;
width: 50%;
}<h1>Foo is not equal to bar</h1>...as davidmatascommented, using margin:autois sometimes more practical, than calculating the margin-offset by hand.
...正如davidmatas 所评论的，使用margin:auto有时比margin手动计算-offset更实用。
So, we can align the underline to the left, right or center (without knowing the current width) by using one of these combinations:
因此，我们可以width使用以下组合之一将下划线对齐到左侧、右侧或中心（不知道当前）：
- Left:
margin-right: auto(or just leave it off) - Middle:
margin: auto - Right:
margin-left: auto
- 左：（
margin-right: auto或只是离开它） - 中：
margin: auto - 对：
margin-left: auto
Full example
完整示例
.underline {
display: table;
margin-left: auto;
margin-right: auto;
}
.underline:after {
border-bottom: 1px solid #f00;
content: '';
display: block;
width: 50%;
}
.underline--left:after {
margin-right: auto; /* ...or just leave it off */
}
.underline--center:after {
margin-left: auto;
margin-right: auto;
}
.underline--right:after {
margin-left: auto
}<h1 class="underline underline--left">Foo is not equal to bar</h1>
<h1 class="underline underline--center">Foo is not equal to bar</h1>
<h1 class="underline underline--right">Foo is not equal to bar</h1>Block-Level Elements
块级元素
This can easily be adopted, so that we can use block-level elements. The trick is to set the pseudo-elements height to the same height as its realelement (simply height:100%):
这很容易被采用，这样我们就可以使用块级元素。诀窍是将伪元素的高度设置为与其真实元素相同的高度（简单地height:100%）：
div {
background-color: #eee;
display: table;
height: 100px;
width: 350px;
}
div:after {
border-bottom: 3px solid #666;
content: '';
display: block;
height: 100%;
width: 60px;
}<div></div>回答by Temani Afif
Here is another solution that rely on linear-gradientwhere you can easily create any kind of line you want. You can also have multiple lines (on each side for example) by using multiple background:
这是另一种解决方案，它依赖于linear-gradient您可以轻松创建所需的任何类型的线条。通过使用多个背景，您还可以有多行（例如在每一侧）：
.box1 {
width: 200px;
padding: 20px;
margin: 10px auto;
text-align: center;
background:
linear-gradient(to right, transparent 20%, #000 20%, #000 40%, transparent 40%) 0 100% / 100% 3px no-repeat,
#ccc
}
.box2 {
width: 200px;
padding: 20px;
margin: 10px auto;
text-align: center;
background:
linear-gradient(to right, transparent 20%, red 20%, red 80%, transparent 80%) 0 100% / 100% 2px no-repeat,
#ccc
}
.box3{
width: 200px;
padding: 20px;
margin: 10px auto;
text-align: center;
background:
linear-gradient(to right, transparent 20%, red 20%, red 80%, transparent 80%) 0 100% / 100% 2px no-repeat,
linear-gradient(to right, transparent 30%, blue 30%, blue 70%, transparent 70%) 0 0 / 100% 2px no-repeat,
linear-gradient(to bottom, transparent 30%, brown 30%, brown 70%, transparent 70%) 0 0 / 3px 100% no-repeat,
linear-gradient(to bottom, transparent 20%, orange 20%, orange 70%, transparent 70%) 100% 0 / 3px 100% no-repeat,
#ccc
}<div class="box1">
Box1
</div>
<div class="box2">
Box2
</div>
<div class="box3">
Box3
</div>Here is another syntax to achieve the same as above:
这是实现与上述相同的另一种语法：
.box1 {
width: 200px;
padding: 20px;
margin: 10px auto;
text-align: center;
background:
linear-gradient(#000, #000) top /40% 3px no-repeat,
#ccc
}
.box2 {
width: 200px;
padding: 20px;
margin: 10px auto;
text-align: center;
background:
linear-gradient(red,red) bottom/ 60% 2px no-repeat,
#ccc;
}
.box3{
width: 200px;
padding: 20px;
margin: 10px auto;
text-align: center;
background:
linear-gradient(red , red)bottom left/ 60% 2px,
linear-gradient(blue, blue) 60% 0 / 40% 2px,
linear-gradient(brown, brown) left/ 3px 30%,
linear-gradient(orange, orange) right / 3px 40%,
#ccc;
background-repeat:no-repeat;
}<div class="box1">
Box1
</div>
<div class="box2">
Box2
</div>
<div class="box3">
Box3
</div>回答by sites
I used a grid to build draw some of the borders.
我使用网格来构建绘制一些边框。
See here.
见这里。
Code:
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive partial borders</title>
<style>
/* ungrid without mobile */
.row{width:100%;display:table;table-layout:fixed;}
.col{display:table-cell;}
/* things to change */
.row{width: 70%; margin: auto;}
.mid.row > .col{ height: 150px; }
/* draw box and align text */
.col{ text-align: center;}
.top.left.col{
border-top: 1px solid black;
border-left: 1px solid black;
}
.top.right.col{
border-top: 1px solid black;
border-right: 1px solid black;
}
.bottom.left.col{
border-bottom: 1px solid black;
border-left: 1px solid black;
}
.bottom.right.col{
border-bottom: 1px solid black;
border-right: 1px solid black;
}
.mid.row > .col{
border-left: 1px solid black;
border-right: 1px solid black;
vertical-align: middle;
}
.top.center.col{
position: relative;
top: -0.5em;
}
.bottom.center.col{
position: relative;
bottom: -0.5em;
}
</style>
</head>
<body>
<div class="row">
<div class="top left col"></div>
<div class="top center col">Top</div>
<div class="top right col"></div>
</div>
<div class="mid row">
<div class="col">Mid</div>
</div>
<div class="row">
<div class="bottom left col"></div>
<div class="bottom center col">Bottom</div>
<div class="bottom right col"></div>
</div>
</body>
</html>
回答by Diodeus - James MacFarlane
CSS does not support partial borders. You'd need to use an adjacent element to simulate this.
CSS 不支持部分边框。您需要使用相邻元素来模拟这一点。
