CSS3实现线性渐变用法示例代码详解


Posted in HTML / CSS onAugust 07, 2020

前言

演示下太老版本浏览器的渐变实现了[IE9-];
IE9以前,渐变都是通过滤镜实现的,大体的写法就是这样;

.testDiv {
		width:400px;
		height:400px;
		border:1px solid #f00;
		/*
		IE滤镜写法;
		gradientType : 1代表水平方向 , 0 代表垂直线性渐变 ;
		startColorstr是起始颜色,endColorstr是结束颜色;
		颜色支持十六进制的写法或者英文单词
		当然也支持透明度[十六进制]

		#AAFF0000[AA是透明度(00是完全透明,FF是完全不透明)],后六位是标准的十六进制颜色写法;
		 */
		
		/*IE6~7*/

	    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ccff7700", endColorstr="#eeccc222", GradientType=1);
	    /*IE8*/
	    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ccff7700", endColorstr="#eeccc222", GradientType=1);
	    

	}

效果图就是这样: 水平渐变且颜色比较淡,设置了透明

CSS3实现线性渐变用法示例代码详解

本文主要扯下CSS3下原生实现渐变效果的!!![主流的浏览器和移动端浏览器都可以任性使用]

CSS3线性渐变兼容性

CSS3实现线性渐变用法示例代码详解

标准语法(包含两个参数,第一个参数可以是角度或者英文方向,第二个是渐变起始,可以多个颜色值!)

gradient : ([方向或者角度] , 起始值颜色)
firefox/chrome/ms/opera 四者的写法已经标准化,较前一些版本需要带前缀
firefox(-moz-)/chrome(-webkit-)/microsoft(-ms)/opera(-o-) [四种前缀对应四种解析引擎,我那样写只是曾经的代表浏览器,…比如现在opera都跑去用google的blink引擎]

###渐变角度(deg是degree的缩写,角度的意思)

自下而上: to top = 0deg || 360deg
自上而下: top bottom = 180deg || -180deg
自左到右: top left = -90deg || 270deg
自右到左: to right = 90deg || -270deg
右下角到左上角: to top left = 315deg || -45deg
左下角到右上角: to top right = -315deg || 45deg
右上角到左下角: to bottom left = 225deg || -135deg
左上角到右下角:to bootom right = 135deg || -225deg
温馨提示: 建议用角度比较标准化,英文方向的safari有些解析后和其他浏览器好像不一样

效果图

CSS3实现线性渐变用法示例代码详解

CSS3实现线性渐变用法示例代码详解

CSS3实现线性渐变用法示例代码详解

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style type="text/css" media="screen">
    div {
        width: 200px;
        height: 200px;
        border: 1px solid #ccc;
        box-sizing: border-box;
        text-align: center;
        line-height: 200px;
        float: left;
        margin: 10px;
    }
    /*
			我这里的类命名都是简写:
			u :up,
			d:down,
			l:left,
			r:right,
			b:bottom,
			2: to;
			角度正数是顺时针,负的逆时针;角度是代表到某个角度的时候开始往其他范围扩散哦;
			以前刚搞的时候也挺懵,其实自己多写写就晓得了;
			截止我写这篇文章,渐变的标准规范更加完善了,许多都不需要带前缀了;
			而为了兼顾移动端,webkit这种还不能丢掉

		*/
    
    .u2d {
        background: -webkit-linear-gradient(180deg, #590BCC, #18CC6C);
        background: linear-gradient(180deg, #590BCC, #18CC6C);
    }
    
    .d2u {
        background: -webkit-linear-gradient(0deg, #590BCC, #18CC6C);
        background: linear-gradient(0deg, #590BCC, #18CC6C);
    }
    
    .l2r {
        background: -webkit-linear-gradient(90deg, #590BCC, #18CC6C);
        background: linear-gradient(90deg, #590BCC, #18CC6C);
    }
    
    .r2l {
        background: -webkit-linear-gradient(-90deg, #590BCC, #18CC6C);
        background: linear-gradient(-90deg, #590BCC, #18CC6C);
    }
    
    .rb2lu {
        background: -webkit-linear-gradient(-45deg, #590BCC, #18CC6C);
        background: linear-gradient(-45deg, #590BCC, #18CC6C);
    }
    
    .lb2ru {
        background: -webkit-linear-gradient(45deg, #590BCC, #18CC6C);
        background: linear-gradient(45deg, #590BCC, #18CC6C);
    }
    
    .ru2lb {
        background: -webkit-linear-gradient(-135deg, #590BCC, #18CC6C);
        background: linear-gradient(-135deg, #590BCC, #18CC6C);
    }
    
    .lu2rd {
        background: -webkit-linear-gradient(135deg, #590BCC, #18CC6C);
        background: linear-gradient(135deg, #590BCC, #18CC6C);
    }
    
    .mclg1 {
        background: -webkit-linear-gradient(135deg, #D6C4F0, #F6B5B5,#18CC6C,#1AB25E);
        background: linear-gradient(135deg, #D6C4F0, #F6B5B5,#18CC6C,#1AB25E);
    }
    
    .mclg2 {
        background: -webkit-linear-gradient(135deg, #1FB4DC ,#18CC6C , #8B1A1A,#677C67,#BED128);
        background: linear-gradient(135deg, #1FB4DC ,#18CC6C , #8B1A1A,#677C67,#BED128);
    }
    
    .mclg3 {
        background: webkit-linear-gradient(135deg, #590BCC, #18CC6C,#B5D821,#22CB33,#BA8787,#050201);
        background: linear-gradient(135deg, #590BCC, #18CC6C,#B5D821,#22CB33,#BA8787,#050201);
    }
    
    .mclg4 {
        background: -webkit-linear-gradient(-135deg, rgba(20,20,20,.9) ,rgba(50,50,50,.6),rgba(60,125,70,.7), rgba(150,150,150,.8),rgba(200,200,200,.9),rgba(80,125,6,.75),rgba(175,75,75,.5));
        background: linear-gradient(-135deg, rgba(20,20,20,.9) ,rgba(50,50,50,.6),rgba(60,125,70,.7), rgba(150,150,150,.8),rgba(200,200,200,.9),rgba(80,125,6,.75),rgba(175,75,75,.5));
    }
    </style>
</head>

<body>
    <div class="u2d">自上而下</div>
    <div class="d2u">自下而上</div>
    <div class="l2r">自左到右</div>
    <div class="r2l">自右到左</div>
    <div class="rb2lu">右下角到左上角</div>
    <div class="lb2ru">左下角到右上角</div>
    <div class="ru2lb">右上角到左下角</div>
    <div class="lu2rd">左上角到右下角</div>
    <div class="mclg1">四种颜色渐变</div>
    <div class="mclg2">五种颜色渐变</div>
    <div class="mclg3">六种颜色渐变</div>
    <div class="mclg4">其中颜色带透明的渐变</div>
</body>

</html>

总结

CSS3的出现,让线性渐变不用只依赖PS实现了…前端的小伙伴也能自行做出各种挺炫的渐变效果!!!哈哈哈哈哈~~~

到此这篇关于CSS3实现线性渐变用法示例代码详解的文章就介绍到这了,更多相关css3 线性渐变内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3 绘制BMW logo实的现代码
Apr 25 HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
Nov 16 HTML / CSS
HTML5 与 XHTML2
Oct 17 HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
May 09 HTML / CSS
html5 利用canvas实现超级玛丽简单动画
Sep 06 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
Apr 10 HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
May 03 HTML / CSS
HTML5学习心得总结(推荐)
Jul 08 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
Jun 11 HTML / CSS
CSS+HTML 实现顶部导航栏功能
Aug 30 HTML / CSS
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
Dec 06 HTML / CSS
CSS实现背景图片全屏铺满自适应的3种方式
Jul 07 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 #HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 #HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
Jul 16 #HTML / CSS
css3实现小箭头各种图形效果
Jul 08 #HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
Jun 22 #HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
Jun 22 #HTML / CSS
CSS3 box-shadow属性实例详解
Jun 19 #HTML / CSS
You might like
同一空间绑定多个域名而实现访问不同页面的PHP代码
2006/12/06 PHP
php 邮件发送问题解决
2014/03/22 PHP
ThinkPHP无限级分类原理实现留言与回复功能实例
2014/10/31 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
JavaScript严格模式详解
2015/11/18 Javascript
总结JavaScript设计模式编程中的享元模式使用
2016/05/21 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
浅谈JS中String()与 .toString()的区别
2016/10/20 Javascript
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
2019/12/04 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
2020/07/20 Javascript
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python程序员鲜为人知但你应该知道的17个问题
2014/06/04 Python
Python实现的最近最少使用算法
2015/07/10 Python
理解Python中的With语句
2016/03/18 Python
Python cookbook(数据结构与算法)将名称映射到序列元素中的方法
2018/03/22 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
Linux常见面试题
2013/03/18 面试题
土木工程毕业生推荐信
2013/10/28 职场文书
2014年情人节活动方案
2014/02/16 职场文书
学术会议主持词
2014/03/17 职场文书
经典英文广告词
2014/03/18 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
运动会广播稿20字
2015/08/19 职场文书
Python pygame实现中国象棋单机版源码
2021/06/20 Python