Question

我列出了几个<li>内联，每个都有以下属性：

border-bottom-color: #eee;

我尝试定位第一个和最后一个<li>，并将border-bottom填入#eee，但只将填入一半。因此，第一个<li>的底部边框将从右侧开始填充50％，最后一个<li>的底部边框将从左侧开始填充50％。

我怎样才能做到这一点？除了可能只添加height: 1px以下ul的div。

Answer 1

您可以使用linear-gradient，background-size，background-repeat和background:position：

p {
  border:solid;
  width:350px;
  margin:auto;
  border-bottom:none;
  background:linear-gradient(black,black) bottom /* left or right or else */ no-repeat;
  background-size:50% 3px;

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

甚至可以动画：http://codepen.io/gc-nomade/pen/IGliC

否则;也可能涉及box-shadow或border-image。

Answer 2

正如j08691在评论中指出的那样，对这一个使用linear-gradient可能是个更好的主意（或者你可以使用半宽伪元素并定位它）。

使用 linear-gradient background-image :(浏览器支持率高于border-image）

所需要的只是创建所需厚度的渐变（下面的片段中为2px），将渐变图像的宽度设置为元素宽度的50％，然后定位图像。

＆＃13;

ul {
  list-style-type: none;
}
ul li {
  float: left;
  padding: 8px;
  background-image: linear-gradient(#eee, #eee); /* no color change, just one color */
  background-size: 100% 2px; /* 2px is thickness of the border */
  background-repeat: no-repeat; /* don't repeat background */
  background-position: 100% 100%; /* by default position w.r.t right bottom */
}
ul li:first-child,
ul li:last-child {
  background-size: 50% 2px; /* set bg size as half width for first and last li */
}
ul li:last-child {
  background-position: 0% 100%; /* override position w.r.t left bottom for last li */
}

＆＃13;

<ul>
  <li>Test Content</li>
  <li>Test Content</li>
  <li>Test Content</li>
  <li>Test Content</li>
  <li>Test Content</li>
</ul>

＆＃13;

使用 linear-gradient border-image：

对于这种方法，我们需要为另一半创建一个透明的渐变，为另一半创建#eee，并将其设置为border-image属性的值。

＆＃13;

ul {
  list-style-type: none;
}
ul li {
  float: left;
  padding: 8px;
  border-bottom: 2px solid #eee;
}
ul li:first-child {
  border-width: 0px 0px 2px 0px;
  border-image-source: linear-gradient(to right, transparent 50%, #eee 50%);
  border-image-slice: 1;
}
ul li:last-child {
  border-width: 0px 0px 2px 0px;
  border-image-source: linear-gradient(to left, transparent 50%, #eee 50%);
  border-image-slice: 1;
}

＆＃13;

<ul>
  <li>Test Content</li>
  <li>Test Content</li>
  <li>Test Content</li>
  <li>Test Content</li>
  <li>Test Content</li>
</ul>

＆＃13;

Answer 3

您可以使用伪元素来解决此问题。

只需在:before上放置:first-child，在:after放置:last-child，然后将边框应用于这些伪元素：

＆＃13;

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 200px;
}

li {
  padding: .5em 0;
  position: relative;
  display: inline;
}

li:first-child:before,
li:last-child:before {
  content: '';
  position: absolute;
  bottom: 0;
  border-bottom: 5px solid #eee;
  width: 50%;
}

li:first-child:before {
  left: 0;
}

li:last-child:before {
  right: 0;
}

＆＃13;

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

＆＃13;

如果你想玩风格，这里也是一个codepen链接：

CODEPEN LINK

如何只填充边框底部的一半？

3 个答案: