css3 渐变记
css3 渐变
- 线性渐变
- 径向渐变
- 重复线性渐变
- 重复径向渐变
线性渐变
线性渐变接受三个参数，渐变的方向，起始颜色，结束颜色。
标准语法及参数：linear-gradient:([[<angle> | to <side-or-corner>],]?<stop>,<stop>[,<stop>]*)
<angle>:通过角度来确定渐变的方向。0度表示渐变方向从下向上，90度表示从左向右。
关键词:通过使用关键词来确定渐变的方向。比如“to top”，从下到上，"to right"，从左到右，"to bottom"，从上到下，"to left"，从右到左。这些关键词对应的角度值为“0deg”，“90deg”，“180deg”，“270deg”。除了使用“to top”，“to right”之外，还可以使用“to top left”,从右下角到左上角，“to bottom right”,左上角到右下角。
stop:表示颜色与位置的起始点和结束点。可以插入多个stop。
<html>
<head>
<title>css3 线性渐变</title>
<style>
div{
height:100px;
width:100px;
background:linear-gradient(to bottom,rgb(255, 0, 0),rgb(0, 255, 33));
}
</style>
</head>
<body>
<div></div>
</body>
</html>
径向渐变
标准语法及参数：radial-gradient:([[<shape> || <size>][at <position>]?,| at <position>,]?<color-stop>[,<color-stop>]+)
<position>：用来定义径向渐变的圆心位置。如果省略，默认值是center。其他关键词是“left”，“right”，“top”，“bottom”，“left top”，“right top”，“right bottom”，“left bottom”，还可以用长度值与百分比设置。
<shape>：用来定义径向渐变的形状。主要包括circle(圆形)，ellipse(椭圆)。
<size>：定义径向渐变形状大小。可用关键词，长度值与百分比。
<color-stop>：定义径向渐变线的颜色与位置。
<html>
<head>
<title>css3 径向渐变</title>
<style>
div{
height:100px;
width:100px;
background:radial-gradient(circle at 50px 50px,rgb(255, 216, 0) 50px,rgb(232, 14, 14) 100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
重复线性渐变
重复线性渐变repeating-linear-gradient与线性渐变linear-gradient他们的属性相同，但沿着线性方向无限重复。
<!doctype html>
<html>
<head>
<title>css3 重复线性渐变</title>
<style>
div{
height:100px;
width:100px;
background:repeating-linear-gradient(rgb(255, 216, 0) 20px,rgb(232, 14, 14) 40px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
重复径向渐变
重复径向渐变repeating-radial-gradient语法与径向渐变类似，但以径向方向无限重复。
<!doctype html>
<html>
<head>
<title>css3 重复径向渐变</title>
<style>
div{
height: 100px;
width: 100px;
background: repeating-radial-gradient(circle,rgb(255, 216, 0) 20px,rgb(232, 14, 14) 40px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
css3 渐变记的更多相关文章
- css3渐变(Gradients)
<html> http://www.runoob.com/css3/css3-gradients.html CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的 ...
- 25个CSS3 渐变和动画效果教程
随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...
- Css3渐变实例Demo（一）
1.指定渐变背景的大小 .div { background: url(../img/1.jpg); /*background-size:contain;*/ width: 500px; height: ...
- Css3渐变(Gradients)-径向渐变
CSS3径向渐变-radial-gradient()/repeating-radial-gradient() 径向渐变由它的中心定义. 创建径向渐变,至少定义两种颜色节点,呈现平稳过度的颜色.同时,你 ...
- CSS3渐变(Gradients)-线性渐变
CSS3渐变(Gradients)可以让你在两个或多个指定颜色之间显示平稳的过度,包括透明度. 以前,你必须使用图像来实现这些效果.但是,通过Css3渐变(Gradients),你可以减少下载的事件和 ...
- 再说CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- css3渐变详解
今天总结渐变的问题,渐变分为线性渐变.径向渐变.呼呼,废话少说, 线性渐变:background:linear-gradient(设置渐变形式,第一个颜色起点,中间颜色点 中间颜色的位置,结束点颜色) ...
- Web前端方向课程要点：CSS3渐变制作过程
CSS3 渐变 CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可实现. ...
- 14：CSS3 渐变（gradient）与 过度（transition）、CSS3 的2D动画
14:CSS3 渐变 CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可 ...
随机推荐
- [iOS 多线程 & 网络 - 2.4] - 大文件下载 (边下边写/暂停恢复下载/压缩解压zip/多线程下载）
A.需求 边下边写入硬盘 显示下载进度 暂停/恢复 下载 解压文件 多线程下载 B.基本知识 1.小文件下载 如果文件比较小,下载方式会比较多直接用NSData的+ (id)dataWithCon ...
- viPlugin安装破解
viPlugin是一个eclipse 针对vi的插件,使用此插件可以让你在使用eclipse进行编码时使用几乎所有vi命令,可以极大的提高开发编码效率. 安装 点击你的eclipse中的 help ...
- windows下实现微秒级的延时
windowsintegeriostream汇编嵌入式任务 最近正在做一个嵌入式系统,是基于windows ce的,外接硬件的时序要微秒级的延时.1.微秒级的延时肯定不能基于消息(SetTimer函数 ...
- Linq to SQL 绑定 ComboBox
最近学习Linq to SQL,发现Linq是一个开发轻量数据库的好东西,大大简化了数据连接.查询过程.但是在绑定ComBoBox的时间发现了一个问题:Linq查询后得到的数据tolist后,只能实现 ...
- Java计算日期和时间差
这篇文章将使用两个例子计算两个日期的时间差.1.使用Java SDK.2.使用Joda库.1.使用Java SDK 计算两个Date之间的时间差,基本思路为把Date转换为ms(微秒),然后计算两个微 ...
- Spring Hibernate4 整合配置文档
1 applicationContext.xml配置文档 <?xml version="1.0" encoding="UTF-8"?><bea ...
- cocos2d-x 图形绘制
转自:http://blog.csdn.net/zhy_cheng/article/details/8480048 图形绘制的话,在cocos2d-x自带的TestCpp里有,包括绘制点,直线,多边形 ...
- javascript keycode大全【转载】
keycode 8 = BackSpace BackSpace keycode 9 = Tab Tabkeycode 12 = Clearkeycode 13 = Enterkey ...
- Android学习笔记（3）
今天我试着往应用里添加广告,结果adView一操作就闪退,换了很多种方法都不行. 最后解决过程有点坑爹,原来是还没setcontentview就开始adview了,哈哈 虽然我现在菜得不行,还没入门. ...
- TC SRM 663 div2 A ChessFloor 暴力
ChessFloor Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 TC Description Samantha is renovating a squa ...