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

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

css揭秘之linear-gradient相关推荐

《CSS揭秘》读书笔记
摘要 <CSS揭秘>主要是介绍了使用CSS的技巧,通过47个案例来灵活的使用CSS进行实现,同时在实现过程中注重CSS代码的灵活性与健壮性.通过阅读这本书有利于我们编写高质量的CSS代码以 ...
css揭秘实战技巧 - 形状 [二]
全目录本系列文章,主要是围绕css3属性,实现我们常见的各种效果,这些效果都是我们实战开发中经常可以用到的效果: css揭秘实战技巧- 背景与边框 [一] css揭秘实战技巧- 形状 [二] css ...
css 揭秘-读书笔记
css 揭秘 [希]Lea verou 著 css 魔法译该书涵盖7大主题,47个css技巧,是css进阶必备书籍,开阔思路,探寻更优雅的解决方案.这本书完全用css渲染出的html写成的(布局. ...
《CSS揭秘》笔记（一）
前言我们在现代 CSS 中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器 bug.如今的挑战是,在保证 DRY ① .可维护.灵活性.轻量级并且尽可能符合标准的前提下,把我们手中的这些CSS特性 ...
《CSS揭秘》-总结47个Css技巧（一）：常用的背景与边框技巧
注:本文案例来源于<CSS揭秘>这本书. 1. 设置半透明边框无效? 使用 background-clip padding-box 解决. background white backgro ...
CSS揭秘：6.复杂的背景图案（下）
文章目录前言一.网格Svg svg css 小结相关阅读前言上一篇文章中我们学会了如何使用实现棋盘背景的方法,但是显而易见的代码量是比较多的.那么怎么可以优化代码量,降低维护成本呢? 一.网 ...
CSS揭秘：5.条纹背景（上）
文章目录条纹背景 CSS线性渐变 css线性渐变小结 background-size 水平条纹水平 First Try 水平 Second Try 水平 Third Try 水平 Forth Tr ...
双18期|CSS揭秘之简写属性
theme: channing-cyan highlight: a11y-dark 双18期|CSS揭秘之简写属性 tips:每个技术点都值得优学优写:18期一.写在前面 css 简写属性了解吗?前 ...
《CSS揭秘》读后感
最近刚刚把<CSS揭秘>给读完,感触颇深,故写一篇博客来分享一下这本书的内容,以及我从中学到的东西. 这本书不同于我看到的其它CSS书籍,没有一开始就直接讲解各个css属性的作用,而是先告 ...
css常用效果总结,《CSS揭秘》-总结47个Css技巧（三）：视觉效果
注:本文案例转载于<CSS揭秘>这本书. 单侧投影使用 box-shadow 的第四个参数:扩张半径. box-shadow 0 8px 3px -3px rgba(0,0,0,.5)/ ...

css揭秘之linear-gradient

css揭秘之linear-gradient相关推荐

最新文章

热门文章