首页 > 代码库 > css线性渐变 位置问题

css线性渐变 位置问题

2024-07-20 07:45:18   222人阅读

/* 线性渐变 */
div.radial {
 width: 600px;
 height: 100px;
 margin: 30px auto;
 border: 1px #f00 solid;
 background: -webkit-gradient(linear, 0 0, 0 100%, from(yellow), color-stop(50%, red), color-stop(80%, blue));
}

<!-- 线性渐变 --> <div class="radial">

</div>

 

 

我们让渐变结束于8%，而不是默认的100%。请注意我们在头部采用了一个边框，以形成对比。这很常用。

如果我们想要添加多一种(几种)颜色，我们可以这样做：

123
background: white; /* 备用属性 */background: -moz-linear-gradient(top, #dedede, white 8%, red 20%);background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), color-stop(8%, white), color-stop(20%, red);
  • 对于-moz 版本，我们定义，从元素的20%的高度的地方开始是红色。
  • 而对于-webkit，我们使用color-stop，采用两个参数：哪里开始停止，使用哪种颜色。（0-8%是#dedede到white的渐变，8%-20%是white到red的渐变，20%-100%都是red本身。）
 color-stop:    
　　一、上面的渐变是有起点到终点100%渐变的，那如果要红色只占8%的比例，蓝色占92%的比例该怎么办？  
 　 background: -moz-linear-gradient(top , red, blue 8%);     
　　background: -webkit-gradient(linear, 0 0, 0 8%, from(red), to(blue)); 
   则背景色会从0%到8%由红色到蓝色线性渐变，8%到100%为纯蓝色blue.
   二、那又如果，红色跟蓝色之间不渐变，直接切断，则从0%到8%为纯红色，8%到100%为纯蓝色该怎么办？
     background: -moz-linear-gradient(top , red 8%, blue 8%);
     background: -webkit-gradient(linear, 0 8%, 0 8%, from(red), to(blue));
     这时候你会发现只有moz的会按照你想象的去渐变，但是webkit这句无效，蓝色不见了，如果硬要用这种写法去切断两种颜色的话，前面写成（0 7.99%）即可。
    这个是我在看这个网站http://mollar.me/的时候发现的，它的菜单背景用css写出来的，圆角+背景渐变，类似PS渐变叠加模拟玻璃质感的高反光做法，很赞.....
   三、要不然就用这种下面这种添加颜色：
    background: -moz-linear-gradient(top, #dedede, white 8%, red 20%);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(red), color-stop(8%, red), color-stop(8%, blue);
    color-stop可以用来添加颜色，让渐变不单只是两种颜色更绚丽，同时，如果颜色百分比一样的话，就切断颜色，

*、角度(Angle)：

　　正如上面看到的示例，如果您不指定一个角度，它会根据起始位置自动定义。如果你想更多的控制渐变的方向，您不妨设置角度试试。例如，下面的两个渐变具有相同的起点left center，但是加上一个30度的角度。

　　没有角度的示例代码：

1
2
3
background: -moz-linear-gradient(left, #ace, #f96);
background: -webkit-linear-gradient(left,#ace,#f96);
background: -o-linear-gradient(left, #ace, #f96);

　　加上30度的角度代码：

1
2
3
background: -moz-linear-gradient(left 30deg, #ace, #f96);
background: -webkit-gradient(linear, 0 0, 100% 100%, from(#ace),to(#f96));
background: -o-linear-gradient(30deg, #ace, #f96);

　　效果图如下：

　　     

　　当指定的角度，请记住，它是一个由水平线与渐变线产生的的角度，逆时针方向。因此，使用0deg将产生一个左到右横向梯度，而90度将创建一个从底部到顶部的垂直渐变。我来看看你核心代码：

1
2
3
4
background: -moz-linear-gradient(<angle>, #ace, #f96);
background: -webkit-gradient(<type>,<angle>, from(#ace), to(#f96));
background: -webkit-linear-gradient(<angle>, #ace, #f96);
background: -o-linear-gradient(<angle>, #ace, #f96);

　　我们来看看各角度的区别：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
.deg0 {
  background: -moz-linear-gradient(0deg, #ace, #f96);
  background: -webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));
  background: -webkit-linear-gradient(0deg, #ace, #f96);
  background: -o-linear-gradient(0deg, #ace, #f96);
}
     
.deg45 {
  background: -moz-linear-gradient(45deg, #ace, #f96);
  background: -webkit-gradient(linear,0 100%,100% 0%,from(#ace),to(#f96));
  background: -webkit-linear-gradient(45deg, #ace, #f96);
  background: -o-linear-gradient(45deg, #ace, #f96);
}
.deg90 {
  background: -moz-linear-gradient(90deg, #ace, #f96);
  background: -webkit-gradient(linear,50% 100%,50% 0%,from(#ace),to(#f96));
  background: -webkit-linear-gradient(90deg, #ace, #f96);
  background: -o-linear-gradient(90deg, #ace, #f96);
}
.deg135 {
  background: -moz-linear-gradient(135deg, #ace, #f96);
  background: -webkit-gradient(linear,100% 100%,0 0,from(#ace),to(#f96));
  background: -webkit-linear-gradient(135deg, #ace, #f96);
  background: -o-linear-gradient(135deg, #ace, #f96);
}
.deg180 {
  background: -moz-linear-gradient(180deg, #ace, #f96);
  background: -webkit-gradient(linear,100% 50%,0 50%,from(#ace),to(#f96));
  background: -webkit-linear-gradient(180deg, #ace, #f96);
  background: -o-linear-gradient(180deg, #ace, #f96);
}
.deg225 {
  background: -moz-linear-gradient(225deg, #ace, #f96);
  background: -webkit-gradient(linear,100% 0%,0 100%,from(#ace),to(#f96));
  background: -webkit-linear-gradient(225deg, #ace, #f96);
  background: -o-linear-gradient(225deg, #ace, #f96);
}
.deg270 {
  background: -moz-linear-gradient(270deg, #ace, #f96);
  background: -webkit-gradient(linear,50% 0%,50% 100%,from(#ace),to(#f96));
  background: -webkit-linear-gradient(270deg, #ace, #f96);
  background: -o-linear-gradient(270deg, #ace, #f96);
}
.deg315 {
  background: -moz-linear-gradient(315deg, #ace, #f96);
  background: -webkit-gradient(linear,0% 0%,100% 100%,from(#ace),to(#f96));
  background: -webkit-linear-gradient(315deg, #ace, #f96);
  background: -o-linear-gradient(315deg, #ace, #f96);
}
.deg360 {
  background: -moz-linear-gradient(360deg, #ace, #f96);
  background: -webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));
  background: -webkit-linear-gradient(360deg, #ace, #f96);
  background: -o-linear-gradient(360deg, #ace, #f96);
}

　　效果如下：

　　

各角度示意图：

 

 

　　除了起始位置和角度，你应该指定起止颜色。起止颜色是沿着渐变线，将会在指定位置（以百分比或长度设定）含有指定颜色的点。色彩的起止数是无限的。如果您使用一个百分比位置，0％代表起点和100％是终点，但区域外的值可以被用来达到预期的效果。 这也是通过CSS3 Gradient制作渐变的一个关键所在，其直接影响了你的设计效果，像我们这里的示例都不是完美的效果，只是为了能给大家展示一个渐变的效果，大家就这样先用着吧。我们接着看一下不同的起址色的示例：

1
2
3
background: -moz-linear-gradient(top, #ace, #f96 80%, #f96);
background: -webkit-linear-gradient(top,#ace,#f96 80%,#f96);
background: -o-linear-gradient(top, #ace, #f96 80%, #f96);

　　效果如下：

　　

　　如果没有指定位置，颜色会均匀分布。如下面的示例：

1
2
3
background: -moz-linear-gradient(left, red, #f96, yellow, green, #ace);
background: -webkit-linear-gradient(left,red,#f96,yellow,green,#ace);
background: -o-linear-gradient(left, red, #f96, yellow, green, #ace);

　　效果如下

　　










css线性渐变 位置问题


联系
我们