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,如需转载请自行联系原作者

相关文章
|
7月前
CSS3 radial-gradient 径向渐变
CSS3 radial-gradient 径向渐变
24 0
|
7月前
CSS3 transform
CSS3 transform
32 0
|
8月前
|
前端开发
CSS中transform的使用
CSS中transform的使用
|
10月前
|
前端开发
css-transform2D变换
css-transform2D变换
72 0
你不知道的css3 transition animation transform
你不知道的css3 transition animation transform
|
前端开发
线性渐变背景 CSS linear-gradient() 函数 background-image: linear-gradient()
线性渐变背景 CSS linear-gradient() 函数 background-image: linear-gradient()
91 0
线性渐变背景 CSS linear-gradient() 函数 background-image: linear-gradient()
|
前端开发
css:repeating-linear-gradient实现托尼老师理发店门口的灯柱子
css:repeating-linear-gradient实现托尼老师理发店门口的灯柱子
css:repeating-linear-gradient实现托尼老师理发店门口的灯柱子
|
前端开发
CSS:linear-gradient()背景颜色线性渐变
CSS:linear-gradient()背景颜色线性渐变
160 0
|
Web App开发 移动开发 HTML5
第101天:CSS3中transform-style和perspective
一、transform-style 1、transform-style属性是3D空间一个重要属性,指定嵌套元素如何在3D空间中呈现。 有两个属性值:flat和preserve-3d。 transform-style属性的使用语法非常简单: transform-style: flat | preserve-3d 其中flat值为默认值,表示所有子元素在2D平面呈现。
969 0

相关实验场景

更多