CSS3渐变知识梳理

作者: 是小张啊啊 | 来源:发表于2018-08-23 10:40 被阅读4次

css3渐变:线性和径向
CSS3渐变知识梳理
css3编写浏览器背景渐变背景色
CSS3渐变的使用方法:
CSS 渐变
CSS3之渐变
css3背景和border渐变色写法，和使用border-ima
CSS3 渐变（Gradients）
渐变
Css渐变gradients深入理解

CSS3渐变的两种类型

1.线性渐变（Linear Gradient）
1.1 两种颜色

/*水平或垂直渐变*/
/* 从上到下写法（默认渐变方向）*/
#linear p:nth-child(1){
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
}           
/*从下到上*/
#linear p:nth-child(2){
   background: linear-gradient(to top,red, deepskyblue);
}
/*从左到右 */
#linear p:nth-child(3){
     background: linear-gradient(to right,red, deepskyblue); 
}
/*从右到左 */
#linear p:nth-child(4){
     background: linear-gradient(to left,red, deepskyblue);
 }

/*对角线渐变*/
/*从左下角到右上角*/
#linear p:nth-child(5){
    background: linear-gradient(to top right,red, deepskyblue);
}

/*使用角度*/
/*请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度*/
#linear p:nth-child(6){
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(30deg,red,deepskyblue);
}

/*重复性线性渐变*/
#linear p:nth-child(9){
   /* Safari 5.1 - 6.0 */
   background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
   /* Opera 11.1 - 12.0 */
  background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
   /* Firefox 3.6 - 15 */
   background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* 标准的语法 */
  background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

1.2多种颜色渐变

/*从下到上*/
#linear p:nth-child(7){
    background: linear-gradient(to top,red, deepskyblue,green,yellow);
 }
/*从左下角到右上角*/
#linear p:nth-child(8){
    background: linear-gradient(to top right,red, deepskyblue,green,yellow);
}

2.径向渐变（Radial Gradient）

/*均匀分布径向渐变*/
#linear p:nth-child(10){
   background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
   background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
   background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
   background: radial-gradient(red, green, blue); /* 标准的语法 */
}
/*不均匀分布径向渐变*/
#linear p:nth-child(11){
   background: radial-gradient(red 10%, deepskyblue 60%, green 30%, yellow 10%); /* 标准的语法 */
}
/*设置形状渐变*/
/*其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse*/
#linear p:nth-child(12){
   background: radial-gradient(circle,red 10%, deepskyblue 60%, green 30%, yellow 10%); /* 标准的语法 */
}
/*重复的径向渐变*/
#linear p:nth-child(13){
   background: repeating-radial-gradient(circle,red 10%, deepskyblue 60%, green 30%, yellow 10%); /* 标准的语法 */
}

两张图片，仅供参考