关闭

css3-制作渐变

219人阅读 评论(0) 收藏 举报
分类:

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

  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;

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:56677次
    • 积分:939
    • 等级:
    • 排名:千里之外
    • 原创:40篇
    • 转载:2篇
    • 译文:1篇
    • 评论:3条
    文章分类
    最新评论