界面渐变特效 -- CSS实现 -- 兼容IE8

news/2025/2/23 5:01:37
特别注意:里面的RGB颜色值必须要全写,不能使用缩写。

左右:
background: -webkit-gradient(linear, 0 0, 0 100%, from(#80c1e7), to(#213c7c));   background: -webkit-linear-gradient(left, #80c1e7, #213c7c);   background: -moz-linear-gradient(left, #80c1e7, #213c7c);   background: -o-linear-gradient(left, #80c1e7, #213c7c);   background: -ms-linear-gradient(left, #80c1e7, #213c7c);   background: linear-gradient(left, #80c1e7, #213c7c);   filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #80c1e7, endColorstr = #213c7c); 上下: background: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e8e8e8)); background: -webkit-linear-gradient(top, #ffffff, #e8e8e8); background: -moz-linear-gradient(top, #ffffff, #e8e8e8); background: -o-linear-gradient(top, #ffffff, #e8e8e8); background: -ms-linear-gradient(top, #ffffff, #e8e8e8); background: linear-gradient(top, #ffffff, #e8e8e8); filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 0, startColorstr = #ffffff, endColorstr = #e8e8e8);

  




上下:
background: -webkit-linear-gradient(top,#ffffff,#f5f5f5); background: -moz-linear-gradient(top,#ffffff,#f5f5f5); background: -webkit-gradient(linear, top, bottom,from(#ffffff),to(#f5f5f5)); background: linear-gradient(top,#ffffff,#f5f5f5); background: -ms-linear-gradient(top,#ffffff,#f5f5f5); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ffffff, endColorstr=#f5f5f5); 左右: background: -webkit-linear-gradient(left,#41caf4,#5399f6); background: -moz-linear-gradient(left,#41caf4,#5399f6); background: -webkit-gradient(linear,left top,right top,from(#41caf4),to(#5399f6)); background: linear-gradient(left,#41caf4,#5399f6); background: -ms-linear-gradient(left,#41caf4,#5399f6); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#41caf4, endColorstr=#5399f6); IE透明度: filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /*IE6~IE8*/ 相关说明: 上面的滤镜代码主要有三个参数,依次是:startcolorstr, endcolorstr, 以及gradientType。 其中gradientType=1代表横向渐变,gradientType=0代表纵向淅变。startcolorstr=”色彩” 代表渐变渐变起始的色彩,endcolorstr=”色彩” 代表渐变结尾的色彩。 filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60) 其中各个参数的含义如下: opacity表示透明度,默认的范围是从0 到 100,他们其实是百分比的形式。也就是说,0代表完全透明,100代表完全不透明。 finishopacity 是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100。 style用来指定透明区域的形状特征: 0 代表统一形状 1 代表线形 2 代表放射状 3 代表矩形。 startx 渐变透明效果开始处的 X坐标。 starty 渐变透明效果开始处的 Y坐标。 finishx 渐变透明效果结束处的 X坐标。 finishy 渐变透明效果结束处的 Y坐标。 filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0); -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8*/ background:red; /* 一些不支持背景渐变的浏览器 */ background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5))); background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));

  


http://www.niftyadmin.cn/n/1733227.html

相关文章

javascript面向对象技术基础(二)

数组 我们已经提到过,对象是无序数据的集合,而数组则是有序数据的集合,数组中的数据(元素)通过索引(从0开始)来访问,数组中的数据可以是任何的数据类 型.数组本身仍旧是对象,但是由于数组的很多特性,通常情况下把数组和对象区别开来分别对待(Throughout this book, objects and…

树莓安装Nginx并支持CGI

陈拓 2020.09.17/2020.09.17 1. 概述 百度百科对Nginx 的介绍: Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔赛索耶夫为俄罗斯访问量第二的Rambler.ru站点(俄文:…

Position属性四个值:static、fixed、absolute和relative的区别

1、static(静态定位):默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 2、relative(相对定位):生成相对定位的元素&#x…

树莓派安装使用数据库SQLite

陈拓 2020/07/29-2020/07/29 1. 概述 SQLite官网:https://www.sqlite.org/index.html 最新版本: 官方对SQLite的介绍: SQLite是一个C语言库,它实现了一个小型、快速、自包含、高可靠性、全功能的SQL数据库引擎。SQLite是世界上…

(网页)JS和CSS不缓存方法,时间戳

<link ..... href".....css?time" new Date()><script type"text/javascript" src"js/retaccountDetailhtml.js?var1"></script>每次代码变动之后自动加上一个时间戳&#xff0c;使之前旧版本失效把。很多构建工具都可以做到…

如何清空type=file控件内容

<script>function go() {document.getElementById("ttt").outerHTML"";}</script><input typefile namettt id"ttt"> <input typebutton οnclick"go()" value清除file框的内容>

树莓派安装使用数据库MariaDB (MySQL)

陈拓2020/08/17-2020/08/17 1. 相关文档 《树莓派安装使用数据库SQLite》 https://blog.csdn.net/chentuo2000/article/details/108682421 2. 概述 百度百科关于MariaDB和MySQL的描述&#xff1a; MariaDB数据库管理系统是MySQL的一个分支&#xff0c;主要由开源社区在维护…

CSS再学

css的注释 /*.......*/ 直接在html代码中写css <p style"color: rebeccapurple;font-size: 18px">Hao</p> css代码写在当前文件中 <head> <meta charset"UTF-8"> <title>Title</title> <style type"text/c…