来源

css渐变

CSS 中设置的渐变是 gradient 数据类型,它是一种特别的image数据类型。使用background-image设置,可叠加设置多个;

CSS3 定义了两种类型的渐变(gradients):

线性渐变 linear-gradient()

渐变的实现由两部分组成:渐变线和色标。渐变线用来控制发生渐变的方向;色标包含一个颜色值和一个位置,用来控制渐变的颜色变化。浏览器从每个色标的颜色淡出到下一个,以创建平滑的渐变,通过确定多个色标可以制作多色渐变效果。 使用渐变色做背景已经很常见了:

background: linear-gradient(direction/angle, color-stop1, color-stop2, ...);
复制代码

方向(direction)

从上到下(默认情况下)

.foo {
width: 100px;
height: 100px;
background: linear-gradient(green, yellow);
}
复制代码
 

从左到右

从右到左同理。 兼容性原因,不同浏览器写法不同:

.foo {
background: linear-gradient(to right, green, yellow); /* 标准的语法 */
background: -webkit-linear-gradient(left, green, yellow); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, green, yellow); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, green, yellow); /* Firefox 3.6 - 15 */
}
复制代码
 

对角

.foo {
background: linear-gradient(to bottom right, green, yellow); /* 标准的语法 */
background: -webkit-linear-gradient(left top, green, yellow); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, green, yellow); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, green, yellow); /* Firefox 3.6 - 15 */
}

作者:Simmzl
链接:https://juejin.im/post/5cb941caf265da03a743eed2
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

css奇技淫巧-色彩渐变与动态渐变的更多相关文章

  1. jQuery ui背景色动态渐变导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. CSS 奇技淫巧:动态高度过渡动画

    这个问题源自于掘金上的一个留言,一个朋友问到,为什么我下面这段代码的高度过渡动画失效了? 伪代码大概是这样: { height: unset; transition: all 0.3s linear; ...

  3. 10 个 GitHub 上超火的 CSS 奇技淫巧项目,找到写 CSS 的灵感!

    大家好,我是你们的 超级猫,一个不喜欢吃鱼.又不喜欢喵 的超级猫 ~ 如果 CSS 是女孩子,肯定如上图那样吧

  4. css清浮动与动态计算元素宽度

    css常用清浮动写法 /*清除浮动*/| .clears:after{ display: block; content: ''; clear: both; height: ; visibility: ...

  5. 有趣的css3实战案例剖析—(背景动态渐变)

    对于css3的学习,更多的是在于对新特性和基础理论的熟悉,这篇文章通过一个案例带领大家了解css3里一些理论知识,也将一些技巧加以总结,从而提高大家的开发效率: 本次案例为(背景颜色渐变),运用css ...

  6. css过滤镜实现颜色渐变

    语法:filter : progid:DXImageTransform.Microsoft.Gradient ( enabled=bEnabled , startColorStr=iWidth , e ...

  7. CSS 奇技淫巧 | 巧妙实现文字二次加粗再加边框

    本文将通过一个实际的业务需求,讲解如何实现 极端场景下文字加粗加边框效果 文字多重边框的效果 需求背景 - 文字的二次加粗 今天遇到这样一个有意思的问题: 在文字展示的时候,利用了 font-weig ...

  8. 通过CSS实现的html背景色渐变

    实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  9. CSS 奇技淫巧十八招

    http://www.tuicool.com/articles/VZneI3   開始覺得自己會寫 CSS 也算有一段時間了,常常遇到一些非常實用的技巧不斷地反覆使用,但是我個人覺得對初學者來說很難從 ...

随机推荐

  1. Go语言中的Package问题

    问题一.Go使用Package组织源码的好处是什么? 1.任何源码属于一个包 2.用包组织便于代码的易读和复用 问题二.Go语言中Package的种类 Go语言中存在两种包.一种是可执行程序的包.一种 ...

  2. BZOJ 2730 矿场搭建

    割点 割点以外的点坍塌不影响其他人逃生,因为假设我们任取两个个非割点s建立救援站,非割点的任意点坍塌,我们都可以从割点走到一个救援出口. 所以我们只考虑割点坍塌的情况. 我们可以先找出图中所有的割点. ...

  3. 【XSY3320】string AC自动机 哈希 点分治

    题目大意 给一棵树,每条边上有一个字符,求有多少对 \((x,y)(x<y)\),满足 \(x\) 到 \(y\) 路径上的边上的字符按顺序组成的字符串为回文串. \(1\leq n\leq 5 ...

  4. awk 计算某一列的和

    awk 计算某一列的和 我需要通过nova list 显示所有虚拟机的cpu总和,即用awk计算某一列的综合 [root@control01 ~]# nla | awk -F '|' 'BEGIN{s ...

  5. Python中布尔值是False的所有值

    在python中以下都是False:为0的,空集合,空字符串,空值None >>> bool(0) False >>> bool(-0) False >> ...

  6. 【菜逼从零学dp】dp专题

    自己dp 太菜 基本没写过题所以就 从新来过从最简单的开始写吧 记录一下自己的历程 题目链接:牛牛与数组 dp[j,i] 表示 第j 位数  以i 结尾的 有多少个 先记录 以i结尾的 一共多少  然 ...

  7. win 10 dpi:150% 与 win 7 dpi:150% 的不同之处

    由于 win 7 和 win 10 的 dpi 处理方式不同,导致我们写的客户端程序在 win 7 上运行正常,在 win 10(dpi:150%)上运行不正常了. 具体的描述,可参考:解决win10 ...

  8. Cucumber语法格式

    @login Feature: Login @T1 Scenario: Login with correct credentail Given I open login page When I ent ...

  9. 第四十一篇-android studio 关闭自动保存功能

    此方法不可用. 第一步:取消自动保存功能 File > Settings > Appearance & Behavior > System Settings > Syn ...

  10. pt-show-grants的用法

    pt-show-grants的用法 1.先查找所有用户和Host 2.然后逐个执行show grants pt-show-grants的功能是格式化打印输出MySQL上的赋权,以便你可以有效地复制.比 ...