Question

如何使用CSS添加<div>底部的颜色？比方说，我的<div>高度为100px，我希望top or upper 50%的{{1}}用蓝色阴影，<div>将用红色阴影。怎么可能呢？

注意：只需要使用一个50% bottom part。

Answer 1

一个div：

<div></div>

和CSS：

div {
    height: 0px;
    width: 200px;
    border-top: solid blue 50px;
    border-bottom: solid red 50px;
}

请参阅http://jsfiddle.net/helderdarocha/A64Lh/

Answer 2

您使用CSS Gradient来获取此信息。如果容器中有内容，渐变会很有用。

<强> CSS

div {
    width: 200px;
    height:100px;
    background: rgb(0, 0, 255);
    background: -moz-linear-gradient(90deg, rgb(0, 0, 255) 50%, rgb(255, 0, 0) 0%);
    background: -webkit-linear-gradient(90deg, rgb(0, 0, 255) 50%, rgb(255, 0, 0) 0%);
    background: -o-linear-gradient(90deg, rgb(0, 0, 255) 50%, rgb(255, 0, 0) 0%);
    background: -ms-linear-gradient(90deg, rgb(0, 0, 255) 50%, rgb(255, 0, 0) 0%);
    background: linear-gradient(180deg, rgb(0, 0, 255) 50%, rgb(255, 0, 0) 0%);
}

Working Fiddle

CSS Gradient generator link

Answer 3

您可以使用:before和:after伪元素。查看 DEMO 。

div{height:100px; width:100px; background:gold;position:relative;}

div:after{
  content: '';
  position: absolute;
  height:10px;
  top:0;
  background:blue;
  width: 100px;
}

div:before{
  content: '';
  position: absolute;
  height:10px;
  bottom:0;
  background:green;
  width: 100px;
}

Answer 4

你可以像下面这样使用。

HTML code：

<div id="box">
    <div id="red">
    red
    </div>

    <div id="blue">
    blue
    </div>    
 </div>

CSS代码

#box 
{
 outline : solid 3px;  
 color: black;    
 height: 100px;
 width: 100px;
}

#red
{
 background-color:red; 
 height : 50px;   
}

#blue
{
 background-color:blue; 
 height : 50px;   
}

http://jsfiddle.net/hwGE3/

如何在<div>底部内容区域中添加颜色？</div>

4 个答案: