css实现div背景色上一半白下一半灰

 

　　今天一位客户想要实现一个div上半部分为白色下半部分为灰色，如下图所示，如何实现呢？可以用css3的渐变属性linear-gradient来完成，一起来看看吧

　　语法

linear-gradient( [ [ <angle> | [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);

　　在预乘颜色空间里定义过渡色，从而可以防止在使用不同透明度颜色的情况下出现违和的灰色。在未舍弃原生语法的情况下，带前缀的版本被 Webkit 和 Trident（IE）实现。参考资料：linear-gradient() - CSS（层叠样式表） | MDN (mozilla.org)

　　最后的代码如下

<style>
    .why{background:linear-gradient(to bottom,white 0%,white 50%,#f3f3f3 50.01%,#f3f3f3 100%)}
</style>
<div class="why">
    some text
</div>