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

 

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

　　语法

?

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

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

　　最后的代码如下

?

1 2 3 4 5 6

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