CSS3渐变,就是这么玩
HTML5学堂(码匠):渐变背景是一直在页面中常见的元素之一,但是在之前所有的渐变背景都是通过设计师通过图形软件设计出来的背景图。其实这种方法比较麻烦,需要设计、切图,而且还影响页面性能。如今CSS3渐变被收入W3C标准,同时也得到了众多浏览器的兼容。让前端工作者直接受益。
本文主要内容:
1.线性渐变概括
2.线性渐变语法与参数
3.线性渐变的基本用法
4.多色线性渐变
1.线性渐变概括
如果有使用过PS的各位想必对PS的渐变操作有所了解,渐变由两种颜色或多种颜色之间的平滑过渡,如PS中的渐变操作:
在线性渐变的过程中,颜色会沿着任意轴过渡,不管从顶部到底部还是从左到右,甚至某个角度开始,都可以实现。最早支持线性渐变的是以-webkit-为前缀的浏览器,后面才在众多浏览器上普及,但是那时候众多浏览器并没有统一的标准,用法差异很大,如今,所有的现代浏览器都支持W3C给出的线性属性的标准语法。
2.线性渐变语法与参数
线性渐变的语法较之其它的CSS3语法相对复杂的多,本文以W3C为标准的语法介绍CSS3的线性渐变。
标准线性渐变语法
<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)
参数说明:
<angle> = [deg]
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <length> | <percentage> ]?
第一个参数指定了渐变的方向,同时决定了渐变颜色的停止位置。这个参数值可以省略,当省略不写的时候其取值为“to bottom”。
下述值用来表示渐变的方向,可以使用角度或者关键字来设置:
angle:用角度值指定渐变的方向(或角度)。
to left:设置渐变为从右到左。相当于: 270deg
to right:设置渐变从左到右。相当于: 90deg
to top:设置渐变从下到上。相当于: 0deg
to bottom:设置渐变从上到下。相当于: 180deg。这是默认值,等同于留空不写。
第二个参数:
color-stop 用于指定渐变的起止颜色。
color:指定颜色。
length:用长度值指定起止色位置。不允许负值
percentage:用百分比指定起止色位置。
3.线性渐变的基本用法
3.1 从底部向顶部渐变
制作从底部到顶部直线渐变最简单的方法直接使用“to top”关键词。表示第一颜色向第二颜色渐变,下同。实现类似于“to top”效果还可以使用角度值“0deg”、“360deg”和“-360deg”。
.div {
width: 400px;
height: 200px;
border: 1px solid #000;
margin-bottom: 10px;
}
.gradient {
background: linear-gradient(to top,#39f,#fff);
}
效果如下:
3.2从右向左渐变
“to left”关键词实现了从右向左颜色渐变,“to left”实现的效果也可以使用角值“-90deg”和“270deg”;
.gradient {
background: linear-gradient(to left,#39f,#fff);
}
效果如下:
3.3 从左下角到右上角
“to top right”关键词实现左下角到右上角的线性渐变。也就是第一颜色从左下角向右上角第二颜色渐变。
background: linear-gradient(to top right,#39f,#fff);
效果如下:
3.4 色标
这个例子指定三个色标:
background: linear-gradient(to bottom, blue, white 80%, green);
需要注意的是第一个和最后一个色标并没有指定一个位置; 由于这个原因, 位置值0%和100%将分别自动的分配给第一个和最后一个色标 。中间的色标指定一个80%的位置, 把剩下的部分留给底部。
效果如下:
4.多色线性渐变
前面向大家演示的效果仅是一些简单的线性渐变(两色渐变),其实在实际中,渐变不仅仅是只有两种颜色,会有多色。接下来,我们一起来看一个从右向左的五彩渐变。
background:-webkit-linear-gradient(right, red, orange, yellow, green, blue, indigo, violet);
background:linear-gradient(right, red, orange, yellow, green, blue, indigo, violet);
由代码可知,我们只要设置好了渐变位置,剩下的就可以随意设置颜色了。
效果如下:
小结
在本篇文章的案例中,效果的位置并不是一成不变的,可以在angle中设置看到更多的渐变效果。同时在实际开发中,为了避免遇到的兼容问题,大家在开发中最好加上内核前缀避免兼容问题。
- mybaits3整合spring总结
- 如何使用Airgeddon找回WiFi密码
- 设计缺陷将导致亚马逊Echo变身成为监听设备
- Unity引擎与C#脚本简介
- Redis分布式缓存系统Lua脚本食用指引
- 基于复杂方案OWSAP CsrfGuard的CSRF安全解决方案(适配nginx + DWR)
- XMLHttpRequest对象如何兼容各浏览器使用?
- Java使用wsdl生成axis版本webservice服务端/客户端代码
- Java微信支付快速入门&工具类
- redis集群 - linux安装与配置笔记
- Apache RocketMQ 4.0.0 - linux安装与配置笔记
- 数据库连接池-tomcat-jdbc食用笔记
- Java.NIO编程一览笔录
- Hbase 学习(三)Coprocessors
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 【项目实战】ADS 层复购率统计
- java设计模式-单例模式详解
- 技术迭代迷茫?Android资深架构师教你如何打破这个局面!
- 基于空间矢量的机器人动力学:铰接体惯量法matlab程序
- leetcode树之相同的树
- 1. 两数之和
- 突击并发编程JUC系列-原子更新字段类AtomicStampedReference
- 去除字符数组中指定的字符
- Android——Android Studio开发环境搭建及设置本地Gradle方法
- Java——类集框架:List集合接口的详解及应用举例
- Android——NORDIC nRF5x系列 DFU升级 APP实现
- Java——集合工具类(Collections工具类、Stack子类)
- Android——RecyclerView自定义OnScrollListener实现下拉刷新监听,上拉加载更多功能
- Java——类集框架:Map集合的详解及应用举例
- Java——类集框架:Set集合接口的详解及应用举例