css3-制作渐变

原创 2015年07月09日 14:05:11

  先了解一下目前的几种现代浏览器的内核,主流内容主要有

  Mozilla(Gecko)(熟悉的有Firefox,Flock等浏览器)-moz-

  WebKit(熟悉的有Safari、Chrome等浏览器)-webkit-

  Opera(presto)(Opera浏览器)-O-

  Trident(IE浏览器)。

》线性渐变(linear)

第一个参数:指定渐变方向,可以用“角度”的关键词或“英文”来表示:



第一个参数省略时,默认为“270deg”,等同于“to bottom”。

第二个和第三个参数,表示颜色的起始点和结束点,可以有多个颜色值。

可以结合透明度使用

eg:background:linear-gradient(to left, red,yellow,green,blue,indigo,violet);

效果图:


兼容性:

IE依靠滤镜实现渐变

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";

(startColorstr表示起点的颜色,endColorstr表示终点颜色。GradientType表示渐变类型,0为默认值,表示垂直渐变,1表示水平渐变)

加上内核前缀-moz-,-webkit-,-o-

background: -webkit-gradient(linear,center top,center bottom,from(#ccc), to(#000));//webkit老版引擎的写法

eg:

background: -moz-linear-gradient(left#ace#f96 5%, #ace#f96 95%, #ace);
background: -webkit-gradient(linearleft topright topfrom(#ace), color-stop(0.05#f96), color-stop(0.5#ace), color-stop(0.95#f96), to(#ace)); //color-stop函数接受两个参数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色。

background: -webkit-linear-gradient(left#ace#f96 5%, #ace#f96 95%, #ace);

background: -o-linear-gradient(left#ace#f96 5%, #ace#f96 95%, #ace);//颜色值后面的参数表起点与终点的位置




》径向渐变(radial)径向渐变到目前还不支持Opera的内核浏览器

径向梯度允许指定渐变的形状(圆形circle或椭圆形 ellipse)和大小(最近端,最近角,最远端,最远角,包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover))。 

closest-side:渐变由起点到最近边决定

closest-corner:渐变由起点到最近角决定

 farthest-side:渐变由起点到最远边决定

farthest-corner:渐变由起点到最远角决定

contain:渐变由起点到最近边决定
 

》重复渐变的应用

.repeat1{ //以火狐为例

    background:-moz-repeating-radial-gradient(#ace, #ace 5px, #f96 5px, #f96 10px);}
.repeat2{

    background:-moz-repeating-linear-gradient(-45deg,#ace, #ace 5px, #f96 5px,#f96 10px);}
.repeat3{
 
 background:-moz-repeating-linear-gradient(0deg,#ace 0px, #ace 5px, #f96 5px,#f96 10px);}

 



.repeat4{
  background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
     -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
     -moz-linear-gradient(45deg, transparent 75%, #555 75%),
     -moz-linear-gradient(-45deg, transparent 75%, #555 75%);
}
.repeat5{
     background-image:-moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%),
     -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%);
}

实际出来的效果


加上

div{

-webkit-background-size: 20px 20px;
  -moz-background-size: 20px 20px;
  background-size: 20px 20px;

}
后,控制背景图片的大小,从而达到重复的效果

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

CSS3渐变色彩

CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial) 1.线性渐变语法: 参数: 第一个参数:指定渐变方向,可以用“角度”的关键词或“英文”来表示: 第一个参数省...

CSS3基础第一篇(圆角,阴影,渐变,选择器)

1.border-radius:1px 2px 3px 2px;  /*添加圆角  四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */  2.box-shadow:0px 0px 1...

CSS3背景渐变

在CSS3出来之前要想实现颜色渐变只能使用背景图片,CSS3渐变替代图片实现渐变效果能大大减少网络加载的时间,提升用户体验。当要出现变焦的时候CSS3实现的效果会更好。   CSS3有两种渐变类型:...

css3渐变(Gradients)

CSS3 渐变(Gradients) 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向 径向渐变(Radial Gradients)- 由它们的中心定义  ...

CSS3颜色渐变模式总结

CSS3颜色渐变模式总结     1.线性渐变:linear-gradient    语法: = linear-gradient([ [  | to ] ,]? [, ]+)         ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)