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>

会产生这种效果的背景。

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

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



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

相关文章
|
4月前
|
前端开发
css的渐变属性linear-gradient
css的渐变属性linear-gradient
|
3月前
|
前端开发 UED
CSS3:linear-gradient&input&inset&table
本文介绍了 CSS 中的 `linear-gradient` 渐变、`input` 样式、`inset` 简写属性、`border-collapse: collapse` 表格边框合并以及 `&lt;label&gt;` 元素的 `for` 属性。通过示例代码和解释,帮助读者理解这些 CSS 特性及其应用。
60 13
|
7月前
|
前端开发 开发者
CSS进阶-2D变换:translate, rotate, scale
【6月更文挑战第15天】CSS 2D变换如`translate`、`rotate`和`scale`赋予了网页设计灵活性,无需改动HTML即可实现元素移动、旋转和缩放。本文详解这三个属性,讨论使用中的问题和解决方案,并提供代码示例。例如,`translate(50px, 100px)`平移元素,`rotate(45deg)`顺时针旋转45度,`scale(1.5, 1)`水平放大1.5倍。理解百分比、旋转中心和缩放影响,结合transform-origin和注释,能帮助开发者更好地掌握这些技巧。
151 4
|
8月前
|
前端开发
CSS 盒子模型(Box Model
CSS 盒子模型(Box Model。
47 1
CSS3 radial-gradient 径向渐变
CSS3 radial-gradient 径向渐变
48 0
|
前端开发
css-transform2D变换
css-transform2D变换
112 0
|
前端开发
background属性:linear-gradient使用
background属性:linear-gradient使用
111 0
|
前端开发
CSS box model :盒子模型
CSS box model :盒子模型
119 0
CSS box model :盒子模型
你不知道的css3 transition animation transform
你不知道的css3 transition animation transform
|
前端开发
线性渐变背景 CSS linear-gradient() 函数 background-image: linear-gradient()
线性渐变背景 CSS linear-gradient() 函数 background-image: linear-gradient()
136 0
线性渐变背景 CSS linear-gradient() 函数 background-image: linear-gradient()