css 左边框 50% 高度

Question

我希望 div 的左边框仅显示到 div 的一半。我想对我的右边框做同样的事情，但应该从 div 的底部设置到 div 的中间。我怎样才能实现它？

Answer 1

与@Pekka 类似但不同的方法：使用

:after

伪选择器，如下所示：

.mybox {
  position: relative;
  padding: 10px 20px;
  background-color: #EEEEEE;
}

.mybox:after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 25%;
  width: 50%;
  border-bottom: 1px solid #0000CC;
}

<div class="mybox">
  Le content de box.
</div>

...还有一个 jsFiddle 以达到良好的效果。

Answer 2

好问题。无法使用 border 属性。

如果您可以将 div 的

position

设置为

relative

，唯一想到的就是使用绝对定位、1 像素宽的

div

。尚未彻底测试，但这应该有效：

<div style='width: 1px; top: 0px; bottom: 50%; left: 0px; 
            background-color: blue; overflow: hidden'>
 &nbsp;
</div>

您可以在右侧执行相同的操作，将

left

属性替换为

right

。

请记住，周围的

div

需要是

position: relative

才能发挥作用。我不确定 50% 高度设置是否在所有浏览器中一致工作 - 请务必对其进行测试。如果没有，您可能不得不诉诸像素测量。

Answer 3

2018： 对于现代浏览器：

您可以将

border-image

与渐变一起使用，例如...

border-image: linear-gradient(to bottom, rgba(0,0,0,0) 25%,rgba(0,0,0,1) 25%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 75%);
border-image-slice: 1;

演示：https://jsfiddle.net/hz8wp0L0/

工具： 渐变编辑器

我可以使用吗： 边框图像 （IE11）

Answer 4

对于那些尝试使用左边框实现上面 Aleksandr Belugin 的答案的人，这里是：

.mybox {
  position: relative;
  padding: 10px 20px;
  background-color: #EEEEEE;
}

.mybox:after {
  content: '';
  position: absolute;
  left: 0px;
  top: 25%;
  height: 50%;
  border-left: 1px solid #0000CC;
}

<div class="mybox">
  Le content de box.
</div>

Answer 5

您可以使用：

line-height:50%; /*(or less, much less)*/
overflow:visible;

文本可见，但边框颜色仅为 div 大小的一半。

Answer 6

使用

background

&

linear-gradient

（img）
& 位置 + 大小

linear-gradient

(img)

.alpha {
  background: linear-gradient(180deg, rgba(200, 200, 200, 0.5) 0%, rgba(40, 40, 40, 0.5) 50%, rgba(200, 200, 200, 0.5) 100%) 0 50% / 5px 60% no-repeat;
  /* 
  linear-gradient(180deg, 
    rgba(200, 200, 200, 0.5) 0%, 
    rgba(40, 40, 40, 0.5) 50%, 
    rgba(200, 200, 200, 0.5) 100%) 
  - from top to bottom, 
    starts at position 0% with light grey 
    and middle stops at position 50% with dark grey 
    and ends at position 100% with light grey
  0 50% / 5px 60%
  - position start from left 0, from top 50%
  - size with 5px width, 60% height
  no-repeat
  - so that the img (linear-gradient) doesnt repeat to fill out the background 
    -- so that the position & size works
  */
  padding: 0 0 0 1em;
}

<div class="alpha">aaaa<br>aaaa<br>aaaa<br>aaaa</div>