任何方式来声明一个框的大小/部分边框？
任何方式来声明一个大小/部分边框到css3的框？ 例如一个350px的框，只显示60px的边框底部。 我认为这可能是非常有用的。
例子：
不是真的。 但是，以一种优雅的方式来达到效果是非常容易的，并且不需要多余的标记：
div { width:350px; height:100px; background:lightgray; position:relative; } div:after { content:''; width:60px; height:4px; background:gray; position:absolute; bottom:-4px; } 演示
我知道，这已经解决了，像素被请求。 不过，我只是想分享一些东西
部分带下划线的文本元素可以通过使用display:table或display:inline-block轻松实现
（我只是不使用display:inline-block因为，是的，你知道，尴尬的4像素的差距）。
文本元素
h1 { border-bottom: 1px solid #f00; display: table; }
<h1>Foo is not equal to bar</h1>
我用网格来绘制一些边界。
看到这里 。
码：
<!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>
CSS不支持部分边框。 你需要使用一个相邻的元素来模拟这个。
