镜像渐变-radio-gradient
2013年11月15日13:08:37
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
div {
width:200px;
height:100px;
border:2px solid #000;
float:left;
margin-right:10px;
margin-bottom:10px;
}
.box1 {
background:-moz-radial-gradient(#cccc98,#cd3298,#98cb04);
background:-webkit-radial-gradient(#cccc98,#cd3298,#98cb04);
}
.box2 {
background:-moz-radial-gradient(#ff6766 5%,#fffe03 25%,#3199cc 50%);
background:-webkit-radial-gradient(#ff6766 5%,#fffe03 25%,#3199cc 50%);
}
/*圆形circle渐变*/
.box3 {
background:-moz-radial-gradient(bottom left,circle,#ff6600,#ffff66,#009865);
background:-webkit-radial-gradient(bottom left,circle,#ff6600,#ffff66,#009865)
}
/*椭圆形ellipse渐变*/
.box4 {
background:-moz-radial-gradient(left bottom,ellipse,#cb9998,#feff99,#666793);
background:-webkit-radial-gradient(left bottom,ellipse,#cb9998,#feff99,#666793);
}
/*大小（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner,
farthest-side, farthest-corner, contain or cover)）*/
/*没看懂start*/
.box5 {
background: -moz-radial-gradient(ellipse closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
background: -webkit-radial-gradient(ellipse closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
}
.box6 {
background: -moz-radial-gradient(ellipse farthest-corner, #ace, #f96 10%, #1E90FF 50%, #f96);
background: -webkit-radial-gradient(ellipse farthest-corner, #ace, #f96 10%, #1E90FF 50%, #f96);
}
.box7 {
background: -moz-radial-gradient(circle closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
background: -webkit-radial-gradient(circle closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
}
.box8 {
background: -moz-radial-gradient(circle farthest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
background: -webkit-radial-gradient(circle farthest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
}
/*没看懂end*/
.box9 {
background:-moz-radial-gradient(#cc6733,#ffca97,#009997);
background:-webkit-radial-gradient(#cc6733,#ffca97,#009997)
}
.box10 {
background:-moz-radial-gradient(contain,#cc6733,#ffca97,#009997);
background:-webkit-radial-gradient(contain,#cc6733,#ffca97,#009997)
}
/*下面这个实例应用的是Positioned, Sized，请看代码和效果*//*不懂啊*/
.box11 {
background: -moz-radial-gradient(80% 20%, closest-corner, #3199cc, #ff656b);
background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#3199cc), to(#ff656b));
background: -webkit-radial-gradient(80% 20%, closest-corner, #3199cc, #ff656b);
}
/*不懂重复渐变后面px定义的意思start*/
.box12 {
background:-moz-repeating-radial-gradient(#000,#000 5px,#ff0 5px,#ccc 10px);
background:-webkit-repeating-radial-gradient(#000,#000 5px,#ff0 5px,#ccc 10px);
}
.box13 {
background:-moz-repeating-linear-gradient(left bottom,#000,#000 5px,#ff0 5px,#ccc 10px);
background:-webkit-repeating-linear-gradient(left bottom,#000,#000 5px,#ff0 5px,#ccc 10px);
}
/*不懂重复渐变后面px定义的意思end*/
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5">closest-side最近端</div>
<div class="box6">farthest-corner最远角</div>
<div class="box7">closest-side</div>
<div class="box8">farthest-side最远端</div>
<div class="box9">正常</div>
<div class="box10">contain包含</div>
<div class="box11">下面这个实例应用的是Positioned, Sized</div>
<div class="box12">重复渐变-moz-repeating-linear-gradient和-moz-repeating-radial-gradient</div>
<div class="box13"></div>
</body>
</html>
镜像渐变-radio-gradient的更多相关文章
- 14：CSS3 渐变（gradient）与 过度（transition）、CSS3 的2D动画
14:CSS3 渐变 CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可 ...
- 第161天：CSS3实现兼容性的渐变背景(gradient)效果
CSS实现兼容性的渐变背景(gradient)效果 一.有点俗态的开场白 在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可能,本文就将展示如何实现兼容性的渐变背景效果.在众多的浏 ...
- CSS实现兼容性的渐变背景(gradient)效果
利用css 3实现渐变可以很方便的更改它的颜色,并且能够减少图片的制作,但是它的兼容性并不好,下面的代码就是实现利用css 渐变兼容的代码: .gradient{ width:300px; heigh ...
- CSS3魔法堂：背景渐变（Gradient）
一.前言 很久之前就了解过CSS3的线性渐变(Linear-Gradient),这段时间决定进一步认知这一特性,以下笔记以便日后查阅. 二.CSS3的各种背景渐变 1. 线性渐变 示例——七彩虹 ...
- iOS 2D绘图详解（Quartz 2D）之阴影和渐变(Shadow,Gradient)
前言:这个系列写道这里已经是第五篇了,本文会介绍下阴影和渐变的基础知识,以及一些基本的Demo Code展示,应该还会有两篇,介绍下Bitmap绘制以及Pattern等知识. Shadow shado ...
- 【转】CSS实现兼容性的渐变背景(gradient)效果
一.有点俗态的开场白 要是两年前,实现“兼容性的渐变效果”这个说法估计不会被提出来的,那个时候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但是,在对CSS3支持日趋完善的今天,实现 ...
- CSS3：渐变大全
渐变大全 声明 最后的老写法镜像渐变可能不太准确.其余都完全正确 <!DOCTYPE html> <html> <head> <meta http-equiv ...
- CSS3奇特的渐变示例
渐变 4个维度去理解渐变 线性渐变 径向渐变 新写法 老写法 最后的老写法镜像渐变可能不太准确.其余都完全正确 <!DOCTYPE html> <html> <head& ...
- Android线性渐变
布局实现: 1. 在res中建立drawable文件夹. 2. 在drawable文件夹中建立shape.xml. 3. shape.xml的代码如下: <?xml version=" ...
随机推荐
- 验证SMB登入
使用SMB登入扫描器对大量主机的用户名和口令进行猜解,不过扫描动静很大,容易被察觉,而且每一次登入尝试都会被扫描的主机系统日志记录下来,留下痕迹不建议使用. 实例 第一步: msf > use ...
- 草珊瑚的css基础
首先要了解如下概念: viewport,窗口大小,containing block,block formatting context,inline formatting context,dirctio ...
- activiti5.15中文乱码问题
解决方式: 1.配置文件插入 <bean id="processEngineConfiguration" class="org.activiti.spring.Sp ...
- poj1859The Perfect Symmetry
链接 按x或y排序,假如有对称点的话,头尾相对. #include <iostream> #include<cstdio> #include<cstring> #i ...
- Android 摇一摇之双甩功能
Android 摇一摇之双甩功能 最近做一个摇一摇的功能 网上相关代码很多 但是这次的需求有点奇葩 要求是摇两次才生效 看起来好像很简单 但真正要做遇到的问题还是很多 时间限制 机型灵敏性 摇动的方式 ...
- ajax小技巧，防止多次点击发送多个请求
var isAjax=false;$("btn").click(function(){ if(isAjax) return; isAjax=true; setTimeout(fun ...
- 【linux命令】：查看当前登录用户的信息，本文介绍3种方法
作为系统管理员,你可能经常会(在某个时候)需要查看系统中有哪些用户正在活动.有些时候,你甚至需要知道他(她)们正在做什么.本文为我们总结了4种查看系统用户信息(通过编号(ID))的方法. 1. 使用w ...
- Java / JVM CPU 利用率高 - 诊断方法 1 - Thread Dump 结合 OS 诊断
IBM AIX Java 1. topas 命令定位 CPU 使用高的进程,比如下面 PID 614852 Name PID CPU% java 614852 ...
- C#实现文件下载
1,Http 协议中有专门的指令来告知浏览器, 本次响应的是一个需要下载的文件. 格式如下:Content-Disposition: attachment;filename=filename.ext以 ...
- commonJS — 数组操作（for Array）
for Array github: https://github.com/laixiangran/commonJS/blob/master/src/forArray.js 代码 /** * Creat ...