webkit内核(chrome、safari) 、FF、IE 、opera 下的linear-gradient 写法
来源:互联网 发布:ubuntu tftp 不能启动 编辑:程序博客网 时间:2024/05/21 10:59
1.webkit内核 下
基本语法:background-image:-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值), [color-stop(偏移量小数,停靠颜色值),...] );
注释:
- -webkit-gradient是background的一个属性值;
- webkit内核的Linear Gradients (线性渐变) 第一组参数type(类型)为 linear;
- 第二组参数是,x1 y1, x2 y2,当成颜色渐变体的两个点的坐标就是。x1,x2,y1,y2的取值范围为0%-100%,当x1,x2,y1,y2取值为极值的时候,x1和x2可以取值left(或0%)或right(或100%),,y1和y2可以取值top(或0%)或bottom(或100%);
- 当x1等于x2,y1不等于y2,实现垂直渐变,调整y1,y2的值可以调整渐变半径大小;
- 当y1等于y2,x1不等于x2,实现水平渐变,调整x1,x2的值可以调整渐变半径大小;
- 当y1不等于y2,x1不等于x2,实现角度渐变,当x1,x2,y1,y2取值为极值的时候接近垂直渐变或水平渐变;
- 当x1等于x2,y1等于y2,实现没有渐变,取from色,即“ from(颜色值) ”;
- 实现垂直渐变和水平渐变渐变时,x1和x2可以最简单的取值是left(或0%)或right(或100%),y1和y2可以最简单的取值是top(或0%)或bottom(或100%);
- from(开始颜色值),to(结束颜色值)是两个渐变颜色值;
- [color-stop(偏移量<小数>,停靠颜色值),...]:可以使用多个color-stop,如果渐变只有2个颜色,那么可以不使用该参数;偏移量必须为小数,如果偏移量>=1,那么该color-stop相当于无效;
基本语法:background: -moz-linear-gradient(top, #FF0000, #F9F900);
注释:
参数:top、bottom垂直,left、right水平 例如:top时从顶部由#FF0000到#F9F900渐变,bottom时从底部由#FF0000到#F9F900渐变。
3. IE下
基本语法:filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0');
注释:
!!!IE9下渐变和圆角混用会出现bug,原因是二者不能共存于一个div, 解决办法需要给这个div再加一层div,上面放圆角,设置溢出隐藏;下面放渐变,即可基解决。
但是在IE7下,渐变变得无效,所以在上层div写一个针对IE7的渐变hack,即可解决。
参数:startColorStr起始颜色 endColorStr结束颜色 gradientType为0时代表垂直,为1时代表水平。
4. opera 下
background: -o-linear-gradient(top,#FF0000, #F9F900);
注释:同FF
- webkit内核(chrome、safari) 、FF、IE 、opera 下的linear-gradient 写法
- struts2文档下载支持Chrome safari FF IE Opera浏览器
- js 获取浏览器IE、FF、Chrome、Opera、Safari
- 播放音乐方法(兼容IE FF Chrome Opera Safari)
- onmusewheel事件(兼容IE,FF,opera,safari,chrome)
- onmusewheel事件(兼容IE,FF,opera,safari,chrome)
- 兼容性好的TAB选项卡(IE,FF,Opera,Safari,Chrome)
- css3书签风格按钮列表(兼容ie,ff,chrome,safari和opera)
- css渐变参数说明(webkit内核的safari、 Chrome, FF等)
- 兼容 ie,ff,Google,safari,opera 的回车事件
- js代码判断浏览器种类IE、FF、Opera、Safari、chrome及IE版本
- 浏览器检测IE(6、7、8、9、10)、chrome、ff、opera、safari、iOS、android
- js代码判断浏览器种类IE、FF、Opera、Safari、chrome及版本
- js代码判断浏览器种类IE、FF、Opera、Safari、chrome及版本
- js代码判断浏览器种类IE、FF、Opera、Safari、chrome及版本
- js代码判断浏览器种类IE、FF、Opera、Safari、chrome及版本
- js代码判断浏览器种类IE、FF、Opera、Safari、chrome及版本
- js代码判断浏览器种类IE、FF、Opera、Safari、chrome及版本
- Algorithm--Insertion Sort
- 希尔排序
- Python os.walk()和os.path.walk()
- 一、Yii框架学习之单选框
- obj-c内存管理的规则
- webkit内核(chrome、safari) 、FF、IE 、opera 下的linear-gradient 写法
- struts返回json数据解析
- linux 增加sudo权限
- 输出gdb调试信息到文件中
- 操作系统与网络实现 之十四
- Truncate
- 蓝桥杯 历届试题 带分数
- 回调函数API
- VS2010 使用TeeChart绘图控件 - 之二 - 绘制图形(折线图,柱状图)