index.html
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>CSS3渐变效果</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div>我是HTML5</div> </body> </html>
style.css
@charset "utf-8";
div {
width: 500px;
height: 200px;
/*background-color: green;*/
/*background-image: linear-gradient(orange, green);*/
/*background-image: linear-gradient(to bottom right, orange, green);*/
/*background-image: linear-gradient(-45deg, orange, green);*/
/*background-image: linear-gradient(-45deg, orange 0%, green 20%, blue, red 100%);*/
/*background-image: linear-gradient(-45deg, orange 10px, green 40px, blue, red 500px);*/
/*background-color: red;
background-image: linear-gradient(to top right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));*/
/*background-image: repeating-linear-gradient(orange 10px, green 30px);*/
/*background-color: green;*/
/*background-image: -webkit-linear-gradient(orange, green); webkit引擎还没有剔除前缀*/
/*background-image: -moz-linear-gradient(orange, green); firefox也没有剔除前缀*/
/*background-image: -o-linear-gradient(orange, green); Opera新版本不支持-o-，支持-webkit*/
/*background-image: linear-gradient(orange, green);*/
/*background-image: radial-gradient(orange, green);*/
/*background-image: radial-gradient(circle, orange, green);*/
/*background-image: radial-gradient(circle at top, orange, green);*/
/*background-image: radial-gradient(circle at top right, orange, green);*/
/*background-image: radial-gradient(circle closest-side, orange, green);*/
/*background-image: radial-gradient(circle closest-corner, orange, green);*/
/*background-image: radial-gradient(circle 50px, orange, green);*/
background-image: repeating-radial-gradient(circle 50px, orange, green);
}
相关推荐
第22章 CSS3渐变效果.pdf
114. 第二款jQuery左右移动图片+内容展示插件代码 115. 简单jQuery实现产品图片自动左右滚动插件下载 116. 编辑推荐jQuery超帅模拟图片翻页的展示Flash特效效果 117. 适合网站内容推广淡入淡出特效的jQuery焦点图...
3.jQuery+CSS实用图片收缩与放大效果插件 4.jquery+div实现同时滑动切换的图文展示特效插件下载 5.jquery+div带动画按钮图片手动与自动切换的特效代码 6.jquery一页多用的飞飞图片幻灯插件演示 7.jquery仿...
第3章 实用JavaScript函数 129 3.1 数据验证 130 实例084 通过正则表达式验证日期 130 实例085 验证输入的日期格式是否正确 132 实例086 检查表单元素是否为空 134 实例087 验证E-mail是否正确 135 实例088 通过正则...
第22章 流行应用：AJAX和Property的应用技巧 22.1 实现关机效果的界面 22.2 关机特效（二） 22.3 评星效果 22.4 输入框自动完成功能 22.5 Ajax效果的字符串过滤 22.6 Gmail右上角的Loading效果 22.7 使用XMLHTTP获取...
第22章 流行应用：AJAX和Property的应用技巧 22.1 实现关机效果的界面 22.2 关机特效（二） 22.3 评星效果 22.4 输入框自动完成功能 22.5 Ajax效果的字符串过滤 22.6 Gmail右上角的Loading效果 22.7 使用XMLHTTP获取...
第二部分 为iphone设计网页 第3章 为iphone重新开发网页22 3.1 iphone视区23 3.1.1 更改整站视区24 3.1.2 更改局部视区24 3.1.3 视区属性和常量25 3.2 实现“iphone友好的”网页26 3.2.1 避免缺少...
第6章 使用表格和css渐变来格式化内容 123 6.1 表格布局 123 6.1.1 表格模板 123 6.1.2 两列的表格 124 6.1.3 带有css增强的三列表格 126 6.1.4 带有app图标的四列表格 127 6.1.5 带有emoji图标...
第二十二章.模块(Modules)和运行时共享库(RSLs)(669) 22.1节.创建一个运行时共享库 22.2节.使用跨域的RSL 22.3节.使用FlexFramework作为RSL 22.4节.优化RSL 22.5节.创建基于MXML的模块 22.6节.创建基于ActionScript...
第2章 Canvas API 22 2.1 HTML5 Canvas概述 22 2.1.1 历史 22 2.1.2 canvas是什么 23 2.1.3 canvas坐标 23 2.1.4 什么情况下不用canvas 24 2.1.5 替代内容 24 2.1.6 CSS和canvas 24 2.1.7 浏览器对HTML5 Canvas的...
第2章 Canvas API 22 2.1 HTML5 Canvas概述 22 2.1.1 历史 22 2.1.2 canvas是什么 23 2.1.3 canvas坐标 23 2.1.4 什么情况下不用canvas 24 2.1.5 替代内容 24 2.1.6 CSS和canvas 24 2.1.7 浏览器对...
第2章 Canvas API 22 2.1 HTML5 Canvas概述 22 2.1.1 历史 22 2.1.2 canvas是什么 23 2.1.3 canvas坐标 23 2.1.4 什么情况下不用canvas 23 2.1.5 替代内容 24 2.1.6 CSS和canvas 25 2.1.7 浏览器对...
第3章 音频和视频 53 3.1 html5 audio和video概述 53 3.1.1 视频容器 53 3.1.2 音频和视频编解码器 54 3.1.3 html5 audio和video的限制 55 3.1.4 audio元素和video元素的浏览器支持情况 56 3.2 使用...
44 第2章 绘制 45 2.1 坐标系统 46 2.2 canvas的绘制模型 47 2.3 矩形的绘制 48 2.4 颜色与透明度 50 2 .5 渐变色与图案 52 2.5.1 渐变色 52 2.5.2 图案 54 2.6 阴影 57 2.7 路径、描边与填充 60 2.7.1 ...