《CSS3 经典教程系列》上篇文章介绍了 linear-gradient（线性渐变），这篇文章向大家介绍 radial-gradient（径向渐变）以及重复渐变（线性重复、径向重复）。在以前，渐变效果和阴影、圆角效果一样都是做成图片，现在 CSS3 可以直接编写 CSS 代码来实现。
- Web 开发人员和设计师必读文章推荐
- 20个非常绚丽的 CSS3 特性应用演示
- 35个让人惊讶的 CSS3 动画效果演示
- 推荐12个漂亮的 CSS3 按钮实现方案
- 24款非常实用的 CSS3 工具终极收藏
CSS3 径向渐变和线性渐变是很相似的，我们首先来看其语法：
-webkit-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);
除了您已经在线性渐变中看到的起始位置，方向，和颜色，径向梯度允许你指定渐变的形状（圆形或椭圆形）和大小（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）。 颜色起止(Color stops)：就像用线性渐变，你应该沿着渐变线定义渐变的起止颜色。下面为了更好的理解其具体的用法，我们主要通过不同的示例来对比CSS3径向渐变的具体用法
示例一：
background: -webkit-radial-gradient(#ace, #f96, #1E90FF);
效果：
示例二：
background: -webkit-radial-gradient(#ace 5%, #f96 25%, #1E90FF 50%);
效果如下：
从以上俩个示例的代码中发现，他们起止色想同，但就是示例二定位了些数据，为什么会造成这么大的区别呢？其实在径向渐变中虽然具有相同的起止色，但是在没有设置位置时，其默认颜色为均匀间隔，这一点和我们前面的线性渐变是一样的，但是设置了渐变位置就会按照渐变位置去渐变，这就是我们示例一和示例的区别之处：虽然圆具有相同的起止颜色，但在示例一为默认的颜色间隔均匀的渐变，而示例二每种颜色都有特定的位置。
示例三：
background: -webkit-radial-gradient(bottom left, circle, #ace, #f96, #1E90FF);
效果如下：
示例四：
background: -webkit-radial-gradient(bottom left, ellipse, #ace, #f96, #1E90FF);
效果如下：
示例三和示例四我们从效果中就可以看出，其形状不一样，示例三程圆形而示例四程椭圆形状，也是就是说他们存在形状上的差异。然而我们在回到两个示例的代码中，显然在示例三中设置其形状为 circle，而在示例四中 ellipse，换而言之在径向渐变中，我们是可以设置其形状的。
示例五：
background: -webkit-radial-gradient(ellipse closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
效果如下：
示例六：
background: -webkit-radial-gradient(ellipse farthest-corner, #ace, #f96 10%, #1E90FF 50%, #f96);
效果如下：
从示例五和示例六中的代码中我们可以清楚知道，在示例五中我人应用了closest-side而在示例六中我们应用了farthest-corner。这样我们可以知道在径向渐变中我们还可以为其设置大小(Size)：size的不同选项(closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)指向被用来定义圆或椭圆大小的点。 示例：椭圆的近边VS远角 下面的两个椭圆有不同的大小。示例五是由从起始点(center)到近边的距离设定的，而示例六是由从起始点到远角的的距离决定的。
示例七：
background: -webkit-radial-gradient(circle closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
效果如下：
示例八：
background: -webkit-radial-gradient(circle farthest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
效果如下：
示例七和示例八主要演示了圆的近边VS远边 ，示例七的圆的渐变大小由起始点(center)到近边的距离决定，而示例八的圆则有起始点到远边的距离决定。
示例九：
background: -webkit-radial-gradient(#ace, #f96, #1E90FF);
效果如下：
示例十：
background: -webkit-radial-gradient(contain, #ace, #f96, #1E90FF);
效果如下：
示例九和示例十演示了包含圆 。在这里你可以看到示例九的默认圈，同一渐变版本，但是被包含的示例十的圆。
最后我们在来看两个实例一个是应用了中心定位和full sized,如下所示：
background: -moz-radial-gradient(circle, #ace, #f96);
/* Safari 4-5, Chrome 1-9 */
/* Can't specify a percentage size? Laaaaaame. */
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#ace), to(#f96));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-radial-gradient(circle, #ace, #f96);
效果如下：
下面这个实例应用的是Positioned, Sized，请看代码和效果：
FreeCMS-1.2发布，下载地址http://code.google.com/p/freecms/downloads/list
Bug修复:
1.菜单管理：删除操作按钮后不能直接进行删除菜单操作。
2.删除单位时操作记录不显示单位名称问题。
3.站点管理：改变所属站点增加改变为一级站点功能，上传非图片logo时虽然提示但仍上传成功问题。
4.模板文件管理：点击查看/下载文件时路径不对问题。
5.list类标签增加index返回值:channelList,infoAttchs,linkClass,link.
6.部分浏览器提示信息出现乱码问题。
7.启用、禁用用户时操作记录记录用户名问题。
功能新增:
1.站点和栏目增加静态化调度配置。
2.信息增加签收、视频、评论功能。
3.栏目页静态化增加可以设置只生成前几页功能。
4.增加网上调查功能。
5.增加互动信件功能。
6.单位可以设置是否接收互动信件。
7.用户可以设置是否接收互动信件。
8.增加系统配置管理功能。
9.增加ajaxLoad标签，通过ajax加载页面。
10.增加模板示例库。
11.增加infoSign标签，显示信息签收代码。
12.增加mailList标签，提取信件列表。
13.增加mailPage标签，分页提取信件列表。
14.增加mailQuery标签，根据查询码查询信件处理结果。
15.增加mailSave标签，信件保存处理。
16.增加questionList标签，提取网上调查列表。
17.增加questionPage标签，分页提取网上调查列表。
17.增加questionOne标签，提取指定id的网上调查。
18.增加config标签，提取系统配置。
19.增加unitList标签，提取单位列表。
20.增加userList标签，提取用户列表。
21.增加video标签，播放视频。
22.增加会员权限管理功能。
22.增加会员组管理功能。
23.增加会员管理功能。
24.增加评论管理功能。
25.增加积分规则管理功能。
26.增加积分记录管理功能。
27.增加commentPage标签，分页提取评论列表。
1.特点:
小巧
功能强
跨浏览器
插件
2.使用
实际是js文件
a) 复制js到WebRoot
b) 页面<script src=/blog_article/"jquery.js" charset=""></script>
3.核心对象及常用方法和属性
a)名称
jQuery和$
用$找出来的对象叫jQuery对象
用document找出来的对象叫Dom对象
b)dom和jquery对象转换
jQuery对象.get(0) --->dom对象
$(dom对象)--->jQuery对象
c)jQuery对象方法
.show() 显示
.hide() 隐藏
.toggle() 显示或隐藏切换
$("div").hide();
$("#myid").show();
$(".myclass").show(100);
.size() 找到多少个对象
var n = $("div").size()
文本框赋值(value)
$("#myid").val(123);
.val()取值
层的内容.innerHTML/.innerText
$("div").html() ;
$("div").html(123);
$("div").html("<input type=button>");
$("div").text("<input type=button>");
样式 document....style.color="red"
$("div").css("color","red").css("font-size","18");
$("div").css({color:"red","font-size":18});
删除
$("div").remove(); 删除所有div
添加
父加子: $("div").append("<input button>");
$("div").append( $("#myid") );
子加父
$("input").appendTo( $("div") );
对象属性
$("input").attr("checked",true);
去首尾空格:
$.trim(字符串)
$("div").each( function(i,obj){} );
$.post(url,function(x){});
$.post(url,{键:值},function(x){});
$.getJSON(url,function(x){//这里x已转成json了，不要用eval});
克隆
$("div").clone();
4. 选择器
a) 类选择器
<input type=text class="myclass">
$(".myclass") 找多个
b) id选择器
<input type=text id="myid">
$("#myid") 找一个
相当于:document.getElementById("myid")
c) 标记选择器 找多个
$("div,span")
相当于document.getElementsByTagName()
d) 表单选择器
$(":text") 所有文本框
$("input[type=text][value='']")
$(":radio") 所有单选框
$(":checkbox") 所有复选框
e) 表单属性选择器
$(":checkbox:checked")或$(":checked:checkbox")
$(":checked") 找所有选中（单选框和复选框)
$(":selected") 找所有选中列表框
f) 层级选择器
父找子 d找c
$("table").find("tr") //找子孙都可以
$("table>tbody>tr") 找所有tr
$("table>tbody>tr:first") 找第一行
$("table>tbody>tr").eq(0) 找第一行
$("table>tbody>trdd") 所有奇数行
$("table>tbody>tr:even") 所有偶数行
子找父
$("tr").parent()
找兄弟
$(a).next() 下一个
$(b).prev() 上一个
---jQuery对表格tr的操作
function bh() //序号进行编号
{
jQuery("#t>tr").each(function(i,obj){
obj.cells[0].innerHTML=i+1;
});
}
function addRow() //添加一行tr
{
var tr = jQuery("#t>tr:first").clone().appendTo(jQuery("#t"));
tr.find(":text").val("");
tr.find("td").eq(4).html(""); //eq(4)第二个文本框
bh();
}
function droRow(del) //删除一行tr
{
jQuery(del).parent().parent().remove();
bh();
}
//计算输入文本中数字的结果
function js(js)
{
//找到tr
var tr=jQuery(js).parent().parent();
//取数
var sl=tr.find(":text").eq(1).val();
var jg=tr.find(":text").eq(2).val();
tr.find("td").eq(4).html(sl*jg);
}
单选radio取值：jQuery("input[@type=radio][name=ckbb][checked]").val();
<-------------------------------------------------------------
其它看到的：
获取一组radio被选中项的值
var item = $('input[@name=items][@checked]').val();
获取select被选中项的文本
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二个元素为当前选中值
$('#select_id')[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$('input[@name=items]').get(1).checked = true;
获取值：
文本框，文本区域：$("#txt").attr("value")；
多选框checkbox：$("#checkbox_id").attr("value")；
单选组radio： $("input[@type=radio][@checked]").val();
下拉框select： $('#sel').val();
控制表单元素：
文本框，文本区域：$("#txt").attr("value",'');//清空内容
$("#txt").attr("value",'11');//填充内容
多选框checkbox： $("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined) //判断是否已经打勾
单选组radio： $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项 （错）
$("input[@name=radio_s][@value=16]").attr("checked",true);（测试通过）
下拉框select： $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项 （错）
$("select[name=sex] option[value="-sel3"]").attr("selected",true);(测试通过)
$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option
$("#sel").empty()；//清空下拉框
$("#select1")[0].options(index).selected = true; //使第index个option选中
$("#select1")[0].options(3).text //取索引为3的option值