如何控制边框高度?

边框将始终位于包含框的整个长度(元素的高度加上其填充),除了调整其应用的元素的高度外,无法控制边框。如果你只需要一个垂直的分隔符, 能够 用途:

<div id="left">
  content
</div>
<span class="divider"></span>
<div id="right">
  content
</div>

CSS:

span {
 display: inline-block;
 width: 0;
 height: 1em;
 border-left: 1px solid #ccc;
 border-right: 1px solid #ccc;
}

Demo at JS Fiddle ,调整 span.container 调整边框“高度”。

或者,使用伪元素( ::before 或 ::after ,给定以下HTML:

<div id="left">content</div>
<div id="right">content</div>

下面的css在any之前添加了一个伪元素 div 元素的相邻同级 div 元素:

div {
    display: inline-block;
    position: relative;
}

div + div {
    padding-left: 0.3em;
}

div + div::before {
    content: '';
    border-left: 2px solid #000;
    position: absolute;
    height: 50%;
    left: 0;
    top: 25%;
}

JS Fiddle demo .

仅使用 line height

行高:10px;
< /代码> 


line-height: 10px;

不错。但是试试这个…(应该适用于除IST-Just之外的所有人-包括Webkit)

<br>
<input type="text" style="
  background: transparent;
border-bottom: 1px solid #B5D5FF;
border-left: 1px solid;
border-right: 1px solid;
border-left-color: #B5D5FF;
border-image: -webkit-linear-gradient(top, #fff 50%, #B5D5FF 0%) 1 repeat;
">

//可以自由编辑和添加所有其他浏览器。

我只是在找这个…通过使用大卫的答案,我使用了一个跨度并给它一些填充(高度不起作用+上边缘问题)。像魅力一样工作;

见 fiddle

<ul>
  <li><a href="index.php">Home</a></li><span class="divider"></span>
  <li><a href="about.php">About Us</a></li><span class="divider"></span>
  <li><a href="#">Events</a></li><span class="divider"></span>
  <li><a href="#">Forum</a></li><span class="divider"></span>
  <li><a href="#">Contact</a></li>
</ul>

.divider {
    border-left: 1px solid #8e1537;
    padding: 29px 0 24px 0;
}

我想控制边界的高度。我怎么能这样做?

不能。CSS边框将始终跨越元素的整个高度/宽度。

解决方法之一是使用绝对定位(可以接受百分比值)将边界承载元素放置在两个div中的一个div中。为此,你必须使元素 position: relative .

您可以创建任意高度的图像,然后使用css background(-position)属性定位该图像,如:

#somid { background: url(path/to/img.png) no-repeat center top;

而不是 center top 您也可以使用像素或类似百分比 50% 100px .

http://www.w3.org/TR/CSS2/colors.html#propdef-background-position