CSS3线性渐变 径向渐变 background linear-gradient radial-gradient
2017-10-24 14:49
651 查看
CSS3的线性渐变
-1. 在mozilla下–moz-linear-gradient( top,#ccc, #ff6f45);
有三个参数,第一个参数表示线性渐变的方向,top是从上到下、left是从左到右,如果定义成left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。
<style> .box { width: 200px; height: 200px; background: -moz-linear-gradient( top, #ffdc85, #ccc); } </style> <div class="box"></div>
2. webkit下
第一种写法webkit-gradient(linear,left top, left bottom,from(#ccc),to(#000));
第一个参数表示渐变类型(type),可以是linear(线性渐变)或者radial(径向渐变)。第二个参数和第三个参数,都是一对值,分别表示渐变起点和终点。这对值可以用坐标形式表示,也可以用关键值表示,比如 left top(左上角)和left bottom(左下角)。第四个和第五个参数,分别是两个color-stop函数。color-stop函数接受两个参数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色。
<div class="box"></div> <style> .box { width: 200px; height: 200px; background: -webkit-gradient(linear,center top,center bottom,from(#ccc),to(#000)); } </style>
第二种写法:-webkit-linear-gradient(top,#ccc,#000) 跟mozilla的一样
-3.在Opear下
-o-linear-gradient(top,#ccc,#000)
有三个参数,第一个参数表示线性渐变的方向,top是从上到下、left是从左到右,如果定义成left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。
由于现在测试的opear浏览器已经更换了webkit内核,所以参考webkit下的写法。
-4.在ie下
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/
E依靠滤镜实现渐变。startColorstr表示起点的颜色,endColorstr表示终点颜色。GradientType表示渐变类型,0为缺省值,表示垂直渐变,1表示水平渐变。
具体应用
1、开始于center(水平方向)和top(垂直方向)相当于Top → Bottom:.box { width: 200px; height: 200px; background: -webkit-linear-gradient(top, #ccc,#000); background: -moz-linear-gradient(top,#ccc,#000); background: -o-linear-gradient(top,#ccc,#000); /*background: -webkit-gradient(linear,top,from(#ccc),to(#000));*/ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ccc, endColorstr=#000);/*IE<9>*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ccc, endColorstr=#000)";/*IE8+*/ }
2、始于left(水平方向)和center(垂直方向) Left → Right
background: -webkit-linear-gradient(left, #ccc,#000); background: -moz-linear-gradient(left,#ccc,#000); background: -o-linear-gradient(left,#ccc,#000); /*background: -webkit-gradient(linear,left,from(#ccc),to(#000));*/
3、起始于left(水平方向)和top(垂直方向)
background: -webkit-linear-gradient(left top, #ccc,#000); background: -moz-linear-gradient(left top,#ccc,#000); background: -o-linear-gradient(left top,#ccc,#000); /*background: -webkit-gradient(linear,left top,from(#ccc),to(#000));*/
4、线性梯度
background: -moz-linear-gradient(left, #cccccc, #000000, #cccccc, #000000, #ace); background: -webkit-gradient(linear, left top, right top, from(#cccccc), color-stop(0.25, #000000), color-stop(0.5, #cccccc), color-stop(0.75, #000000), to(#ace)); background: -webkit-linear-gradient(left, #cccccc, #000000, #cccccc, #000000, #ace); background: -o-linear-gradient(left, #cccccc, #000000, #cccccc, #000000, #ace);
5、指定任意停止
background: -moz-linear-gradient(left, #cccccc, #000000 5%, #cccccc, #000000 95%, #ace); background: -webkit-gradient(linear, left top, right top, from(#cccccc), color-stop(0.05, #000000), color-stop(0.5, #cccccc), color-stop(0.95, #000000), to(#ace)); background: -webkit-linear-gradient(left, #cccccc, #000000 5%, #cccccc, #000000 95%, #ace); background: -o-linear-gradient(left, #cccccc, #000000 5%, #cccccc, #000000 95%, #ace);
6、角度
下面的两个渐变具有相同的起点left center,但是加上一个30度的角度
无角度
background: -webkit-linear-gradient(left, #ccc,#000); background: -moz-linear-gradient(left,#ccc,#000); background: -o-linear-gradient(left,#ccc,#000);
有角度
background: -webkit-linear-gradient( 30deg, #ccc,#000); background: -moz-linear-gradient(30deg,#ccc,#000); background: -o-linear-gradient(30deg,#ccc,#000);
当指定的角度,它是一个由水平线与渐变线产生的的角度,逆时针方向。因此,使用0deg将产生一个左到右横向梯度,而90度将创建一个从底部到顶部的垂直渐变。
.deg0 { background: -moz-linear-gradient(0deg, #ccc, #000); background: -webkit-linear-gradient(0deg, #ccc, #000); background: -o-linear-gradient(0deg, #ccc, #000); } .deg45 { background: -moz-linear-gradient(45deg, #ccc, #000); background: -webkit-linear-gradient(45deg, #ccc, #000); background: -o-linear-gradient(45deg, #ccc, #000); } .deg90 { background: -moz-linear-gradient(90deg, #ccc, #000); background: -webkit-linear-gradient(90deg, #ccc, #000); background: -o-linear-gradient(90deg, #ccc, #000); } .deg135 { background: -moz-linear-gradient(135deg, #ccc, #000); background: -webkit-linear-gradient(135deg, #ccc, #000); background: -o-linear-gradient(135deg, #ccc, #000); } .deg180 { background: -moz-linear-gradient(180deg, #ccc, #000); background: -webkit-linear-gradient(180deg, #ccc, #000); background: -o-linear-gradient(180deg, #ccc, #000); } .deg225 { background: -moz-linear-gradient(225deg, #ccc, #000); background: -webkit-linear-gradient(225deg, #ccc, #000); background: -o-linear-gradient(225deg, #ccc, #000); } .deg270 { background: -moz-linear-gradient(270deg, #ccc, #000); background: -webkit-linear-gradient(270deg, #ccc, #000); background: -o-linear-gradient(270deg, #ccc, #000); } .deg315 { background: -moz-linear-gradient(315deg, #ccc, #000); background: -webkit-linear-gradient(315deg, #ccc, #000); background: -o-linear-gradient(315deg, #ccc, #000); } .deg360 { a942 background: -moz-linear-gradient(360deg, #ccc, #000); background: -webkit-linear-gradient(360deg, #ccc, #000); background: -o-linear-gradient(360deg, #ccc, #000); }
相关文章推荐
- 分针网——每日分享:CSS3之径向渐变(radial-gradient)
- CSS3背景渐变属性 linear-gradient(线性渐变)和radial-gradient(径向渐变)。
- css3 线性渐变和径向渐变样式 分类: css3 button 按钮 渐变样式 2014-02-12 15:19 340人阅读 评论(0) 收藏
- css3 线性渐变和径向渐变样式
- CSS3 radial-gradient 径向渐变属性 实现重复半圆角内边框
- CSS3背景渐变属性 linear-gradient(线性渐变)和radial-gradient(径向渐变)
- CSS3背景渐变属性 linear-gradient(线性渐变)和radial-gradient(径向渐变)
- CSS3的线性渐变 和 径向渐变。
- CSS3:radial-gradient,径向渐变的使用方法
- CSS3 线性渐变(linear-gradient)
- CSS3实践之路(二): 颜色渐变(Gradient)和背景(Backgroud)
- 使用CSS3创建文字颜色渐变(CSS3 Text Gradient)
- CSS3-颜色渐变--线性渐变+径向渐变
- CSS3 经典教程系列:CSS3 线性渐变(linear-gradient)
- CSS3 线性渐变(linear-gradient)
- CSS3 经典教程系列:CSS3 线性渐变(linear-gradient)
- CSS3 线性渐变(linear-gradient)
- CSS3 渐变 线性渐变
- css3 gradient 渐变
- CSS3渐变─Gradient