CSS3实现背景颜色渐变

最新推荐文章于 2022-11-05 19:09:28 发布

chituyi7386

最新推荐文章于 2022-11-05 19:09:28 发布

阅读量153

点赞数

原文链接：https://my.oschina.net/u/1590422/blog/538377

版权

基本语法：

background-image:-webkit-gradient( 
type, 
x1, 
y1, 
x2, 
y2, 
from(开始颜色值), 
to(结果颜色值)， 
[color-stop(偏移量小数，停靠颜色值),...] 
);-webkit-gradient( 
type, 
start_point, 
end_point, 
stop... 
)

　　参数类型简要说明：

　　type渐变的类型，分为线性渐变（linear）和径向渐变（radial）

　　start_point渐变图片中渐变的起始点

　　end_point渐变图像中渐变的结束点

　　stopcolor-stop()方法，指定渐变进程中特定的颜色

　　inner_center内部中心点，径向渐变起始圆环

　　inner_radius内部半径，径向渐变起始圆

　　outer_center外部渐变结束圆的中心点

　　outer_radius外部渐变结束圆的半径

　　1、start_point(x1,y1)，end_point(x2,y2)，这里的x,y对应左上角为起点的坐标，此处的x,y参数表示与css中的background-position是一致的，可以使用像素、百分比或者left,top,right,bottom。

　　当x1=x2，y1≠y2，实现垂直渐变，调整y1，y2的值可以调整渐变半径大小；

　　bbackground-image:-webkit-gradient(linear,0%0%,0%100%,from(#fff800),to(#f60));

　　当y1=y2，x1≠x2，实现水平渐变，调整x1，x2的值可以调整渐变半径大小；

　　bbackground-image:-webkit-gradient(linear,0%0%,100%0%,from(#fff800),to(#f60));

　　当y1≠y2，x1≠x2，实现角度渐变，当x1，x2，y1，y2取值为极值的时候接近垂直渐变或水平渐变；

　　bbackground-image:-webkit-gradient(linear,10%30%,100%100%,from(#fff800),to(#f60));

　　当x1=x2，y1=y2，没有渐变。

　　2、color-stop是一个过渡点，相当于ps里面，多添加一个渐变的点，有两个参数，一个是点的位置，另外一个是过渡点的颜色。

　　background-image:-webkit-gradient(linear,0%0%,100%0%,from(#fff800),to(#f60),color-stop(20%,#fff));

　　background-image:-webkit-gradient(linear,0%0%,100%0%,from(#fff800),to(#fff),color-stop(20%,#fff),color-stop(20%,#f60));

　　3、创建径向渐变

　　background-image:-webkit-gradient(radial,4545,10,5250,30,from(#fff800),to(#f60),color-stop(90%,#c00));

几种主流浏览器兼容的写法：

　　一.Webkit浏览器

　　(1)第一种写法：

　　background:-webkit-gradient(linear,10%10%，100%100%，

　　color-stop(0.14,rgb(255,0,0)),

　　color-stop(0.5,rgb(255,255,0)),

　　color-stop(1,rgb(0,0,255)));

　　第一个参数：表示的是渐变的类型

　　linear线性渐变

　　第二个参数：分别对应x，y方向渐变的起始位置

　　第三个参数：分别对应x，y方向渐变的终止位置

　　第四/五/N个参数：设置渐变的位置及颜色

　　(2)第二种写法：这种写法比较简单，而且效果比较自然

　　background:-webkit-gradient(linear,00,0100%,from(＃2074af),to(＃2c91d2));

　　第一个参数：表示的是渐变的类型

　　linear线性渐变

　　第二个参数：分别对应x，y方向渐变的起始位置

　　第三个参数：分别对应x，y方向渐变的终止位置

　　第四个参数：设置了起始位置的颜色

　　第五个参数：设置了终止位置的颜色

　　二.Mozilla浏览器

　　(1)第一种写法：

　　background:-moz-linear-gradient(101090deg,

　　rgb(25,0,0)14%,

　　rgb(255,255,0)50%,

　　rgb(0,0,255)100%);

　　第一个参数：设置渐变起始位置及角度

　　第二/三/四/N个参数：设置渐变的颜色和位置

　　(2)第二种写法：这种写法比较简单，而且效果比较自然

　　background:-moz-linear-gradient(top,＃FFC3C8,＃FF9298);

　　第一个参数：设置渐变的起始位置

　　第二个参数：设置起始位置的颜色

　　第三个参数：设置终止位置的颜色

　　三.IE浏览器

　　IE浏览器实现渐变只能使用IE自己的滤镜去实现

　　filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);

　　第一个参数：渐变起始位置的颜色

　　第二个参数：渐变终止位置的颜色

　　第三个参数：渐变的类型

　　0代表竖向渐变1代表横向渐变

例子：

<!DOCTYPE HTML>
<html>
    <head>
     <meta charset="gb2312">
     <title></title>
  <style>
      .b_color{
          width: 200px;
          height: 200px;
          font-weight:bold;
          color:Black;
          border:1px solid #E5F5FF; 
          filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#f1fcc9', endColorStr='#5d7215', gradientType='0');  
          background:-webkit-gradient(linear, 0 0, 0 100%, from(#f1fcc9), to(#5d7215));
          background:-moz-linear-gradient(top, #f1fcc9,#5d7215);
   }
  </style>
 </head>


 <body>
       <div class="b_color"></div>
 </body>
</html>

例图：