HTML-CSS线性渐变
实现背景的渐变可以通过为背景添加颜色渐变的图片,也可以使用浏览器的功能来为背景添加渐变的颜色
在IE6或IE7浏览器下可以使用一下示例的CSS语句,设置filter属性来实现颜色
filter:progid:DXImageTransform.Microsoft.gradient(enabled=true,gradientType=0,startColorStr=#f0f0f0,endColorStr=#020202);
enabled:滤镜开关选项,其值可以是true或者false,分别用来打开和关闭滤镜;
gradientType:渐变类型,其值为1时表示水平渐变,其值为0时表示垂直渐变;
startColorStr:上端或左侧的起始颜色;
endColorStr:下端或右侧的结束颜色
background-image:-moz-linear-gradient(起始点||角度,{颜色,位置},{颜色,位置}...........);《火狐浏览器》
background-image:-webkit-linear-gradient(起始点||角度,{颜色,位置},{颜色,位置}...........);《谷歌浏览器》
background-image:-moz-linear-gradient(起始点||角度,{颜色,位置},{颜色,位置}...........);
HTML-CSS线性渐变的更多相关文章
- CSS线性渐变
/*CSS线性渐变*/ FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff, ...
- css线性渐变兼容
css线性渐变兼容 background: linear-gradient(top, rgba(54, 77, 127, 0.8), rgba(54, 77, 127, 0.8)); backgrou ...
- css线性渐变--linear-gradient
使用css直接写渐变,对于现在而言,应该属于比价简单的一件事了,在一定程度上,扁平化的设计趋势的出现,减少了使用渐变色的场景,但是并不影响我们逐渐的熟悉线性渐变Linear-gradient的写法. ...
- 深入理解CSS线性渐变linear-gradient
× 目录 [1]定义 [2]渐变线 [3]色标 [4]重复渐变 [5]多背景 [6]应用场景 [7]IE兼容 前面的话 在CSS3出现之前,渐变效果只能通过图形软件设计图片来实现,可拓展性差,还影响性 ...
- 兼容IE与firefox、chrome的css 线性渐变(linear-gradient)
现行渐变首先看下示例(1)垂直渐变 (2)垂直渐变 IE系列 filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF ...
- 兼容IE与firefox的css 线性渐变(linear-gradient)
IE系列 filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900 ...
- 纯css使用线性渐变实现滚动进度条(来自于微信前端早读课)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css之为文本添加线性渐变和外描边
css之为文本添加线性渐变和外描边 一.效果: 描边:描边+渐变: 二.描边: api:text-stroke 问题:text-stroke的描边是居中描边,无法直接设置外描边 解决:在before ...
- CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(3)线性渐变
线性渐变可以设置3个参数值:方向.起始颜色.结束颜色.最简单的模式只需要定义起始颜色和结束颜色,起点.终点和方向默认自元素的顶部到底部.下面举例说明: .test{ background:linear ...
- 线性渐变css
从上到下的线性渐变: #grad { background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background ...
随机推荐
- shell脚本之流程控制语句
一.分支控制语句 1.if .. fi条件 if condition; then action fi 2.if .. else .. fi条件 if condition;then action; el ...
- 彻底卸载tv
1.卸载 2.C:\Program Files (x86),找到teamviewer选项,右击删除 3.开始--输入regedit,打开注册表,找到如下路径:HKEY_LOCAL_MACHINE\SO ...
- HTML5上传文件显示进度
下面我们使用Html 5的新特性file api实现上传文件,并显示上传文件进度百分比.意图是这样的,当选择文件时,显示当前文件信息.这里我们是结合Asp.net MVC做为服务端,您也可以是其它的服 ...
- 2017-2018-2 20165225『Java程序设计』课程 结对编程练习_四则运算
2017-2018-2 20165225『Java程序设计』课程 结对编程练习_四则运算 需求分析: 支持整数,可进行多运算符运算,有优先级. 设计思路: 在有括号的情况下,先计算得出括号中的结果,如 ...
- 连连看java版
主界面 import java.awt.BorderLayout; import java.awt.Color; import java.awt.Container; import java.awt. ...
- 对CountDownLatch的初步学习
CountDownLatch的中文翻译为"闭锁",在JDK1.5中 CountDownLatch类加入进来.为程序猿进行并发编程提供有利的帮助. 首先我们先看看JDK文档中对于Co ...
- 前端 HTML body标签相关内容 常用标签 盒子标签 div
盒子标签 div <div>可定义文档的分区 division的缩写 译:区 <div> 标签可以把文档分割为独立的.将他们进行分区 div在浏览器中,默认是不会增加任何的效果 ...
- ORACLE-osi分层模型.md
一. 标准化组织ISOISO:国际标准化组织 ( International Organization for Standardization )OSI:开放系统互联 ( open syste ...
- Unity-音频系统
1.声音格式: WAV:无损,音质好,文件大,适用于短文件 OGG&&MP3: 有损,文件小,适用于较长文件,比如背景音乐
- js小数点精度问题
项目背景是用eharts 渲染数据,其中Y 轴的 刻度尺间隔用 interval,代码中如下: yAxis: [ { type : 'value', position:'left', min:minV ...