css奇技淫巧-色彩渐变与动态渐变
来源
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奇技淫巧-色彩渐变与动态渐变的更多相关文章
- jQuery ui背景色动态渐变导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS 奇技淫巧:动态高度过渡动画
这个问题源自于掘金上的一个留言,一个朋友问到,为什么我下面这段代码的高度过渡动画失效了? 伪代码大概是这样: { height: unset; transition: all 0.3s linear; ...
- 10 个 GitHub 上超火的 CSS 奇技淫巧项目,找到写 CSS 的灵感!
大家好,我是你们的 超级猫,一个不喜欢吃鱼.又不喜欢喵 的超级猫 ~ 如果 CSS 是女孩子,肯定如上图那样吧
- css清浮动与动态计算元素宽度
css常用清浮动写法 /*清除浮动*/| .clears:after{ display: block; content: ''; clear: both; height: ; visibility: ...
- 有趣的css3实战案例剖析—(背景动态渐变)
对于css3的学习,更多的是在于对新特性和基础理论的熟悉,这篇文章通过一个案例带领大家了解css3里一些理论知识,也将一些技巧加以总结,从而提高大家的开发效率: 本次案例为(背景颜色渐变),运用css ...
- css过滤镜实现颜色渐变
语法:filter : progid:DXImageTransform.Microsoft.Gradient ( enabled=bEnabled , startColorStr=iWidth , e ...
- CSS 奇技淫巧 | 巧妙实现文字二次加粗再加边框
本文将通过一个实际的业务需求,讲解如何实现 极端场景下文字加粗加边框效果 文字多重边框的效果 需求背景 - 文字的二次加粗 今天遇到这样一个有意思的问题: 在文字展示的时候,利用了 font-weig ...
- 通过CSS实现的html背景色渐变
实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- CSS 奇技淫巧十八招
http://www.tuicool.com/articles/VZneI3 開始覺得自己會寫 CSS 也算有一段時間了,常常遇到一些非常實用的技巧不斷地反覆使用,但是我個人覺得對初學者來說很難從 ...
随机推荐
- [蓝桥杯]2015蓝桥省赛B组题目及详解
/*——————————————————————————————————————————————————————————— [结果填空题]T1 题目:奖券数目 有些人很迷信数字,比如带“4”的数字,认 ...
- SpringBoot配置MySql数据库和Druid连接池
1.pom文件增加相关依赖 <dependency> <groupId>mysql</groupId> <artifactId>mysql-connec ...
- python 字典用法
d = {key1 : value1, key2 : value2 } 1.创建 dict1 = { 'abc': 456 } 2.访问/修改 dict['Name'] 3.删除 del dict[' ...
- python调试之pdb
一.PDB调试命令 pdb调试命令 完整命令 简写命令 描述 args a 列出当前函数的参数 break b <行号> 在某一行设置断点 break b <文件名>:< ...
- zookeeper集群的简单搭建
zookeeper简单介绍 zookeeper是一个为分布式应用提供一致性服务的软件,它是开源的Hadoop项目的一个子项目,并根据google发表的一篇论文来实现的.zookeeper为分布式系统提 ...
- JavaScript手工编写滚动条组件
0 前言 上周的一个练习,由于没来得及编写笔记,这里补充一下~ 虽然CSS3中提供了overflow:scroll; 来实现滚动条,但是这里可以使用原生JS来编写一个,以达到练习组件编写的效果. 练习 ...
- Arrays和String单元测试(课下作业,选做)
在IDEA中以TDD的方式对String类和Arrays类进行学习- 测试相关方法的正常,错误和边界情况 - String类 - charAt - split - Arrays类 - sort - b ...
- Python与微信——itchat包
目录 itchat itchat 一安装itchat pip install itchat pip install echarts-python 二登陆并向文件传输助手发消息 import itcha ...
- Vue学习笔记三:v-bind,v-on的使用
目录 v-bind:绑定属性值,内容相当于js,缩写: v-on:绑定方法,缩写@ 总结 v-bind:绑定属性值,内容相当于js,缩写: 我添加了一个input标签,如下 <input typ ...
- Python:Mac 下 MQTT 服务器 Mosquitto 的配置
我在Mac电脑上搭建时遇到了一些不同于网上大部分情况的问题,特此分享给可能也有遇到相同情况又找不到解决方法的人. 我的电脑系统:macOS Mojave 10.14.3. paho-mqtt 的安装 ...