有什么方法可以声明一个框的大小/部分边框？

有没有办法在 CSS 中声明一个框的大小/部分边框？例如，一个包含 350px的框只在其第一个 60px中显示边框底部。我觉得这可能会很有用。

例子:

enter image description here enter image description here

72158 次浏览
小开

CSS 不支持部分边框。您需要使用相邻的元素来模拟这种情况。

小开
最佳答案

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>

小开

我用一个网格来构建一些边界。

参见 给你。

密码:

/* 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;
}
<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>

小开

我知道，这是已经解决了，并要求像素。但是，我只是想分享一些东西..。

Partly underlined text elements can easily achieved by using display:table or display:inline-block

(我只是不使用 display:inline-block，因为，是的，你知道，尴尬的 4px差距)。

文本元素

h1 {
border-bottom: 1px solid #f00;
display: table;
}
<h1>Foo is not equal to bar</h1>

Centering, display:table makes it impossible to center the element with text-align:center.
Let's work around with 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 bookcasey already introduced, pseudo-elements are worth gold.

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.

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 davidmatas commented, using margin:auto is sometimes more practical, than calculating the margin-offset by hand.

So, we can align the underline to the left, right or center (without knowing the current width) by using one of these combinations:

  • Left: margin-right: auto (or just leave it off)
  • Middle: margin: auto
  • Right: 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>

块级元素

这很容易被采用，因此我们可以使用块级元素。诀窍是将伪元素的高度设置为与其 真的元素(简称 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>

小开

这是另一个依赖于 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 0 0) top /40% 3px no-repeat,
#ccc
}


.box2 {
width: 200px;
padding: 20px;
margin: 10px auto;
text-align: center;
background:
linear-gradient(red 0 0) bottom/ 60% 2px no-repeat,
#ccc;
}


.box3{
width: 200px;
padding: 20px;
margin: 10px auto;
text-align: center;
background:
linear-gradient(red 0 0)bottom left/ 60% 2px,
linear-gradient(blue 0 0) 60% 0 / 40% 2px,
linear-gradient(brown 0 0) left/ 3px 30%,
linear-gradient(orange 0 0) right / 3px 40%,
#ccc;
background-repeat:no-repeat;
}
<div class="box1">
Box1
</div>
<div class="box2">
Box2
</div>
<div class="box3">
Box3
</div>

小开

我一直在研究你的解决方案，然后想出来的。

我很感激你的评论和想法。

<!DOCTYPE html>
<html>


<head>
<meta charset="utf-8">
<title>test file</title>
<style>
#box {
background-color: gray;
position: relative;
left: 10px;
top: 10px;
height: 180px;
width: 380px;
}
    

#grad1 {
position: absolute;
left: -10px;
top: -10px;
height: 40px;
width: 2px;
background-image: linear-gradient(red, red);
}
    

#grad2 {
position: absolute;
left: -10px;
top: -10px;
height: 2px;
width: 40px;
background-image: linear-gradient(red, red);
}
</style>
</head>


<body>
<div id="box">
<div id="grad1"></div>
<div id="grad2"></div>
</div>
</body>


</html>


提交答案