CSS - 只有一半边框可见的边框答案

【问题标题】：CSS - Border where only half of a border is visibleCSS - 只有一半边框可见的边框
【发布时间】：2012-01-10 13:59:07
【问题描述】：

我很困惑，必须让它在 CSS 中工作，才能有一个 div，其中边框只能在它的一半宽度上可见。

边框样式是简单的1px solid #000;

但是，我希望div 的边框顶部不可见（在div 的宽度上为 100%），而仅在div 宽度的前 50% 上。

我无法在任何地方找到这方面的例子，而且它需要以百分比表示，所以通常的技巧包（下半场的图像，...）。

【问题讨论】：

请输入代码！没有它很难回答问题。
我想说这几乎是不可能的，仅使用 css 并且不更改标记或使用特定于您网站上 css/html 的技巧。
@Drewdin 和 Casey 你需要什么代码？问题很简单：它是关于一个 div 和一个边框。
我的坏人，我没有要求任何具体的东西，只要它甚至可以仅使用 CSS 来完成。代码看起来像这样： HTML:
CSS: #holder {border: 1px solid #000;高度：200px；宽度：200px； }
你需要边框渐变查看这个链接来实现这个stackoverflow.com/questions/2717127/css3-gradient-borders

标签： html css

【解决方案1】：

可以使用 CSS 渐变边框

.half-a-border-on-top {
  border-top: 1px solid;
  border-image: linear-gradient(to right, #000 50%, transparent 50%) 100% 1;
}

<span class="half-a-border-on-top">Hello world!</span>

【讨论】：

这是迄今为止最优雅的答案。更一般的答案可能使用透明而不是白色。

【解决方案2】：

如果你根本不想弄乱 HTML，你可以用一个空的伪元素来做，只使用 CSS。当然，你仍然需要知道背景颜色（假设这里是白色）：

<span class="half-a-border-on-top">Hello world!</span>

<style>
.half-a-border-on-top {
  border-top:1px solid black;
  position: relative;
}
.half-a-border-on-top:after {
  padding:0;margin:0;display:block;/* probably not really needed? */
  content: "";
  width:50%;
  height:1.1px;/* slight higher to work around rounding errors(?) on some zoom levels in some browsers. */
  background-color:white;
  position: absolute;
  right:0;
  top:-1px;
}
</style>

结果：

片段

    .half-a-border-on-top {
      border-top:1px solid black;
      position: relative;
    }
    .half-a-border-on-top:after {
      padding:0;margin:0;display:block;/* probably not really needed? */
      content: "";
      width:50%;
      height:1.1px;
      background-color:white;
      position: absolute;
      right:0;
      top:-1px;
    }

    &lt;span class="half-a-border-on-top"&gt;Hello world!&lt;/span&gt;

小提琴：

http://jsfiddle.net/vL1qojj8/

【讨论】：

【解决方案3】：

这行得通吗：

#holder {
        border: 1px solid #000;
        height: 200px;
        width: 200px;
        position:relative;
        margin:10px;
} 
#mask {
        position: absolute;
        top:-1px;
        left:1px;
        width:50%;
        height: 1px;
        background-color:#fff;
}

<div id="holder">
        <div id="mask"></div>
</div>

【讨论】：

这只是显示后半部分而不是隐藏它，但你明白了，只需改变位置。
这个想法真的很酷.. 非常有用。节省了我的时间...谢谢。
如此简单又漂亮！做得好。非常适合用于导航按钮下划线样式！
如果你想要一个透明的背景怎么办？
你是 MVP，多么棒的冠军！

【解决方案4】：

让你看看我如何编辑 leo 的代码，在中间放一个半边框。

试试这个：

html代码

<div class="half-a-border-on-left">Hello world!</div>

css代码

   <style>
.half-a-border-on-left {
  border-left: 1px solid black;
  position: relative;
  height: 50px;
  background: red;
}
.half-a-border-on-left:after {
  padding:0;
  margin:0;
  content: "";
  width: 1px;
  height: 10px;
  background-color:white;
  position: absolute;
  left:-1px;
  top: -10px;
}
.half-a-border-on-left:before {
  padding:0;
  margin:0;
  content: "";
  width: 1px;
  height: 10px;
  background-color:white;
  position: absolute;
  left: -1px;
  bottom: -5px;
}
</style>

这些是我用来放置半边框的代码，谢谢 leo，

【讨论】：

【解决方案5】：

我爱海得拉巴

***

.div_1 {
    width: 50px;
    border-bottom: 2px solid black;
}
.div_2 {
   width: max-content;
   margin-bottom: 10px;
}

&lt;div class="div_1" &gt;&lt;div class="div_2"&gt;I love Hyderabad&lt;/div&gt;&lt;/div&gt;

【讨论】：