css揭秘之linear-gradient

简介:

很神奇的背景设置,
看代码,

<html>
    <title>css</title>
    <style>
        .content {
            background: linear-gradient(90deg,yellow,red);
            width: 100%;
            height: 100%;
        }
    </style>
    <body>
        <div class="content"></div>
    </body>
</html>

422101-20160616221856620-658906432.png

会产生这种效果的背景。

查看浏览器支持性,www.caniuse.com

422101-20160616222418854-1513399926.png

可以看出很多浏览器都支持!



本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/5592336.html,如需转载请自行联系原作者

相关文章
|
10天前
|
前端开发
css的渐变属性linear-gradient
css的渐变属性linear-gradient
CSS3 radial-gradient 径向渐变
CSS3 radial-gradient 径向渐变
36 0
|
前端开发
基于CSS mask和clip-path实现切角的技巧2
基于CSS mask和clip-path实现切角的技巧
186 0
|
前端开发
基于CSS mask和clip-path实现切角的技巧1
基于CSS mask和clip-path实现切角的技巧
110 0
|
前端开发
css-transform2D变换
css-transform2D变换
97 0
|
前端开发
background属性:linear-gradient使用
background属性:linear-gradient使用
你不知道的css3 transition animation transform
你不知道的css3 transition animation transform
|
前端开发
线性渐变背景 CSS linear-gradient() 函数 background-image: linear-gradient()
线性渐变背景 CSS linear-gradient() 函数 background-image: linear-gradient()
113 0
线性渐变背景 CSS linear-gradient() 函数 background-image: linear-gradient()
|
前端开发
CSS:linear-gradient()背景颜色线性渐变
CSS:linear-gradient()背景颜色线性渐变
184 0