Question

如何在div中将第一个垂直 5像素的背景颜色设为蓝色？因此，换句话说，在下面的示例中，顶部会有一个蓝色条形，500像素高5像素。

要明确我有一个特殊原因我不能使用边框等（我希望它很简单！）

这是我到目前为止（link to fiddle here）：

CSS：

.box {
height: 200px;
width: 500px;
background-color: red;
}

HTML：

<div class="box">
</div>

Answer 1

Box-shadow的浏览器支持略好于渐变。这就是我的方法。坦率地说，盒子阴影非常棒。你可以用它们做很多事情来保持你的标记清洁。

box-shadow: inset 0px 5px 0 0 blue
-webkit-box-shadow: inset 0px 5px 0 0 blue

Answer 2

使用CSS渐变。

<强> jsFiddle example

.box {
    height: 200px;
    width: 500px;
    background-color: red;
    background: -moz-linear-gradient(top,  #1e5799 5px, #ff0000 2%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(5px,#1e5799), color-stop(2%,#ff0000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #1e5799 5px,#ff0000 2%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #1e5799 5px,#ff0000 2%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #1e5799 5px,#ff0000 2%); /* IE10+ */
    background: linear-gradient(to bottom,  #1e5799 5px,#ff0000 2%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#ff0000',GradientType=0 ); /* IE6-9 */
}

Answer 3

添加5像素的左侧边框：

border-left: 5px solid blue;

Answer 4

我想我可能会选择:before伪元素。

.box:before {
  content: '';
  width: 100%;
  display: block;
  height: 5px;
  background: blue;
}

jsFiddle

Answer 5

没有边框的最简单方法可能是添加另一个div元素。

<强> HTML

<div class="box" id="other_box">
</div>
<div class="box">
</div>

<强> CSS

.box {
    height: 200px;
    width: 500px;
    background-color: red;
}
#other_box {
    height: 5px;
    background-color: blue;
}

如果你真的希望它是200px主div的第一个5px，你可以将主div的高度改为195px。

的jsfiddle： http://jsfiddle.net/jfJcU/3/

或者，您可以将新div包装在主div中： http://jsfiddle.net/jfJcU/5/

使背景颜色的第一个垂直5像素与其余颜色不同

5 个答案: