制作类似的css彩色盒子

时间:2012-06-26 22:15:05

标签: css

我试图获得图片中框的颜色程度

http://i46.tinypic.com/iefcpl.png

我喜欢图片中的方框,我想要制作类似的方式

这是我的代码,我不能做类似的

<style>
.b{
background:-moz-linear-gradient(top, #fff, #ebebeb);
height:25px;
border:1px #efefef solid;
}
</style>

<div class="b">

</div>

1 个答案:

答案 0 :(得分:1)

.b{
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #ebebeb 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ebebeb)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%,#ebebeb 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%,#ebebeb 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%,#ebebeb 100%); /* IE10+ */
    background: linear-gradient(top, #ffffff 0%,#ebebeb 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ebebeb',GradientType=0 ); /* IE6-9 */
    height:25px;
    border:1px #DDDDDD solid;
}​

我使用Ultimate CSS Gradient Generator为所有浏览器生成渐变。

DEMO