CSS3径向渐变linear-gradient
语法:
选择器{
background:linear-gradien(线性渐变的方向,起点颜色,终点颜色);
}
第一个参数:[可选参数,默认从上到下] 线性渐变的方向:top,bottom,left,right,top left;
第二个和第三个参数:起点颜色和终点颜色,其实中间可以插入更多的颜色,以实现多色渐变效果;支持直接写颜色,或16进制颜色
兼容性问题:
支持chrome和火狐,其他浏览器尚未测试,部分支持IE10,
为了支持chrome和火狐,要分别写上-webkit-,-moz-
比如:
div{
background:-webkit-linear-gradient(top,red,blue);/*谷歌*/
background:-moz-linear-gradient(top,red,blue); /*火狐*/
background:linear-gradient(top,red,blue); /*ie10*/
}
之所以说部分支持IE10,是因为我测试时,第一个参数,写了多种之后,发现IE10只支持少数的几种方向。
ie6~9的背景色渐变:
其实是用了filter滤镜来做:
.div{
filter: progid:DXImageTransform.Microsoft.gradient(
GradientType=0,
startColorstr=pink,
endColorstr=black
);
/*IE7*8*9有效*/
其中:GradientType=1代表纵向,0代表横向
CSS3径向渐变linear-gradient的更多相关文章
- CSS3技巧:利用css3径向渐变做一张优惠券(转)
在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过.那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术 ...
- css3径向渐变详解-遁地龙卷风
(-1)写在前面 我用的是chrome49,如果你用的不是.可以尝试换下浏览器前缀.IE在这方面的实现又特例独行了.不想提及-,这篇是为后续做准备. (0)快速使用 background-image: ...
- CSS3径向渐变----大鱼吃小鱼之孤单的大鱼
最近迷恋上了钓鱼,可是总钓不到大鱼,所以就画条大鱼来安慰一下我这柔弱的心灵. 先上图: 上面这个就是今晚上我要跟大家分享的小DEMO,我给他起名字就“大鱼吃小鱼之孤单的大鱼”. 转入正题,这条大鱼分为 ...
- css3径向渐变
#grad2 { height: 440px; width: 440px; border-radius: %; background: -webkit-radial-gradient(closest- ...
- CSS3径向渐变实现优惠券波浪造型
效果看下图: 左右的波浪边框用CSS搞定这个效果.利用CSS radial-gradient() 函数 CSS 语法: background: radial-gradient(shape size a ...
- CSS3渐变——径向渐变
上节在<再说CSS3渐变——线性渐变>和大家一起学习了CSS3 Gradient中径向渐变最新语法(称得上是W3C的标准语法)相关知识以及其基本使用.今天我们在这一篇中主要和大家一起来了解 ...
- Css3渐变(Gradients)-径向渐变
CSS3径向渐变-radial-gradient()/repeating-radial-gradient() 径向渐变由它的中心定义. 创建径向渐变,至少定义两种颜色节点,呈现平稳过度的颜色.同时,你 ...
- CSS3之径向渐变
设置最终形状参数: ellipse circle 设置长半轴和短半轴 设置椭圆对称中心 设置色标 输出代码: radial-gradient(circle closest-side at ce ...
- CSS3背景渐变。。。
CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 G ...
随机推荐
- Web服务器文件传输程序客户端程序实现
1. 客户端程序--主函数 客户端主程序的流程图如下: 主程序主要是分析输入的命令,根据不同命令调用不同的函数处理或者进行出错处理,函数代码如下: #include "common.h&qu ...
- Clonal hematopoiesis of indeterminate potential(意义不明的克隆性造血)-CHIP
意义不明的克隆性造血是指由一个造血干细胞或者其他早期的起始血细胞为了更好的适应环境而发展成一个带有一些基因变异的亚型. 这个亚型带有基因变异一般是非驱动性的,而且该亚型占血细胞的比率跟年龄有很大的相关 ...
- 二叉树的层次遍历(Java代码实现)
与树的前中后序遍历的DFS思想不同,层次遍历用到的是BFS思想.一般DFS用递归去实现(也可以用栈实现),BFS需要用队列去实现. 层次遍历的步骤是: 1.对于不为空的结点,先把该结点加入到队列中 2 ...
- C#开发自己的Web服务器
介绍 我们将学习如何写一个简单的web服务器,用于响应知名的HTTP请求(GET和POST),用C#发送响应.然后,我们从网络访问这台服务器,这次我们会说“Hello world!” 背景 HTTP协 ...
- Java 线程池Future和FutureTask
Future表示一个任务的周期,并提供了相应的方法来判断是否已经完成或者取消,以及获取任务的结果和取消任务. Future接口源码: public interface Future<V> ...
- [P1860]新魔法药水
题目描述 商店里有N种药水,每种药水都有一个售价和回收价.小S攒了V元钱,还会M种魔法,可以把一些药水合成另一种药水.他一天可以使用K次魔法,问他一天最多赚多少钱? 输入输出格式 输入格式: 第一行四 ...
- mysql的空闲8小时问题
在spring中配置数据源时,必须设定destroy-method="close"属性,以便spring容器关闭时,数据源能正常关闭. 如果数据库时mysql,如果数据源配置不当, ...
- 酷到没朋友—— Cafflano便携式手磨手冲一体壶
又一款外国新玩具~ 设计紧凑,手磨.滤架.滤壶融合的毫无ps痕迹! 简直是出差旅行,杀人越货必备良品!废话不多说,上图: 肿么样,一壶在手,天下我有~~~哈哈哈~~~
- 关于JBoss的一些项目配置
1. 如何使用 IP:port 的形式访问项目 : [1] 在standalone.xml文件中,查找<interfaces>标签,添加如下节点 : <interface name= ...
- css hover dropdown
html-------------------------- <div class="dropdown"> <span>鼠标移动到我这!</span& ...