来源

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. [蓝桥杯]2015蓝桥省赛B组题目及详解

    /*——————————————————————————————————————————————————————————— [结果填空题]T1 题目:奖券数目 有些人很迷信数字,比如带“4”的数字,认 ...

  2. SpringBoot配置MySql数据库和Druid连接池

    1.pom文件增加相关依赖 <dependency> <groupId>mysql</groupId> <artifactId>mysql-connec ...

  3. python 字典用法

    d = {key1 : value1, key2 : value2 } 1.创建 dict1 = { 'abc': 456 } 2.访问/修改 dict['Name'] 3.删除 del dict[' ...

  4. python调试之pdb

    一.PDB调试命令 pdb调试命令 完整命令 简写命令 描述 args a 列出当前函数的参数 break b <行号> 在某一行设置断点 break b <文件名>:< ...

  5. zookeeper集群的简单搭建

    zookeeper简单介绍 zookeeper是一个为分布式应用提供一致性服务的软件,它是开源的Hadoop项目的一个子项目,并根据google发表的一篇论文来实现的.zookeeper为分布式系统提 ...

  6. JavaScript手工编写滚动条组件

    0 前言 上周的一个练习,由于没来得及编写笔记,这里补充一下~ 虽然CSS3中提供了overflow:scroll; 来实现滚动条,但是这里可以使用原生JS来编写一个,以达到练习组件编写的效果. 练习 ...

  7. Arrays和String单元测试(课下作业,选做)

    在IDEA中以TDD的方式对String类和Arrays类进行学习- 测试相关方法的正常,错误和边界情况 - String类 - charAt - split - Arrays类 - sort - b ...

  8. Python与微信——itchat包

    目录 itchat itchat 一安装itchat pip install itchat pip install echarts-python 二登陆并向文件传输助手发消息 import itcha ...

  9. Vue学习笔记三:v-bind,v-on的使用

    目录 v-bind:绑定属性值,内容相当于js,缩写: v-on:绑定方法,缩写@ 总结 v-bind:绑定属性值,内容相当于js,缩写: 我添加了一个input标签,如下 <input typ ...

  10. Python:Mac 下 MQTT 服务器 Mosquitto 的配置

    我在Mac电脑上搭建时遇到了一些不同于网上大部分情况的问题,特此分享给可能也有遇到相同情况又找不到解决方法的人. 我的电脑系统:macOS Mojave 10.14.3. paho-mqtt 的安装 ...