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

相关文章
|
2月前
|
前端开发
css的渐变属性linear-gradient
css的渐变属性linear-gradient
|
1月前
|
前端开发 UED
CSS3:linear-gradient&input&inset&table
本文介绍了 CSS 中的 `linear-gradient` 渐变、`input` 样式、`inset` 简写属性、`border-collapse: collapse` 表格边框合并以及 `&lt;label&gt;` 元素的 `for` 属性。通过示例代码和解释,帮助读者理解这些 CSS 特性及其应用。
42 13
|
前端开发
线性渐变背景 CSS linear-gradient() 函数 background-image: linear-gradient()
线性渐变背景 CSS linear-gradient() 函数 background-image: linear-gradient()
124 0
线性渐变背景 CSS linear-gradient() 函数 background-image: linear-gradient()
|
前端开发
CSS:linear-gradient()背景颜色线性渐变
CSS:linear-gradient()背景颜色线性渐变
190 0
|
前端开发
玩坏css3之linear-gradient揭秘《线性渐变》
没看《css揭秘》之前,我一般就会这样使用liner-gradient(top, #000, #fff)/liner-gradient(45deg, #000, #fff); 我相信很多同事对gradient认知也是到这里,网上普遍也是这样介绍! 正常的情况下:liner-gradient(pink,#fff)在div盒子中是自上而下渐变,如下图: .
2386 0
|
3月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。

热门文章

最新文章