CSS3 常用属性（二）-- 常用颜色、渐变、倒影

      颜色--rgba（0,0,0,1）

　　CSS3之前的颜色表示法有三种：

　　第一种、表示颜色的单词，例如“red”、“green”等。第二种、以“#”开头后面是六个十六进制的数字，例如“#ffffff”，前两个数字代表红，中间两个数字代表绿，后面两个数字代表篮。第三种、rgb(0,0,0) 表示，括号中的每个数取值范围都是0-255，其结果与第二种表示方法类似，第一个值代表红色，第二个代表绿色，第三个代表蓝色。

　　在 CSS3 中，新增了非常好用的颜色表示方法：rgba（0,0,0,1），这种颜色的表示方法，它的前三个数值，和 rgb 表示法相同，第四个值，则代表透明度，取值范围是0-1，0表示完全透明，1表示完全不透明，小数取值越接近0，显示越透明，越接近1，越不透明。

 

　　渐变--gradient

　　CSS3 中提供的渐变色有两种：一种是线性渐变，另一种是径向渐变。

　　首先我们看看线性渐变，下述是我总结的一些线性渐变的简单用法，包括各个页面渐变色的兼容性处理：

/* 简单渐变 */
.box{
    background: -webkit-linear-gradient(red, blue); 
    background: -o-linear-gradient(red, blue);
    background: -moz-linear-gradient(red, blue); 
    background: linear-gradient(red, blue); 
}

/* 简单方向渐变 */
.box {
    background: -webkit-linear-gradient(left top, red , blue); 
    background: -o-linear-gradient(bottom right, red, blue); 
    background: -moz-linear-gradient(bottom right, red, blue); 
    background: linear-gradient(to bottom right, red , blue);
}

/* 使用角度 */
.box {
    background: -webkit-linear-gradient(180deg, red, blue); 
    background: -o-linear-gradient(180deg, red, blue); 
    background: -moz-linear-gradient(180deg, red, blue);
    background: linear-gradient(180deg, red, blue); 
}

/* 使用透明度 */
.box {
    background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); 
    background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
    background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); 
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); 
}

/* 重复的渐变 */
.box {
    background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
    background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
    background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
    background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

　　接下来，再看看径向渐变，其实，在很多情况中，两种渐变用法几乎一样：

/* 简单实例 */
.box {
    background: -webkit-radial-gradient(red, green, blue);
    background: -o-radial-gradient(red, green, blue); 
    background: -moz-radial-gradient(red, green, blue); 
    background: radial-gradient(red, green, blue); 
}

/* 不均匀的渐变 */
.box {
    background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); 
    background: -o-radial-gradient(red 5%, green 15%, blue 60%); 
    background: -moz-radial-gradient(red 5%, green 15%, blue 60%);
    background: radial-gradient(red 5%, green 15%, blue 60%); 
}

/* 形状渐变 */
.box{
    background: -webkit-radial-gradient(circle, red, yellow, green); 
    background: -o-radial-gradient(circle, red, yellow, green); 
    background: -moz-radial-gradient(circle, red, yellow, green); 
    background: radial-gradient(circle, red, yellow, green); 
  }

/* 重复的径向渐变 */
.box {
    background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
    background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
    background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
    background: repeating-radial-gradient(red, yellow 10%, green 15%);
}

 

　　倒影--box-reflect

　　大致用法，如下所示：

.box{
    box-reflect: none; /*没有倒影*/
    box-reflect: above 0; /*倒影在上面*/
    box-reflect: below 10px; /*倒影在下面，距离10px*/
    box-reflect: left 10%; /*倒影在左面，距离10%*/
    box-reflect: right -10px; /*倒影在下面，距离-10px*/
    box-reflect: below 0 url(1.png); /*倒影上面加遮罩图片*/
    box-reflect: below 0 linear-gradient(); /*倒影上面加背景色遮罩*/
}

 

转载于:https://www.cnblogs.com/nation-blue/p/6700743.html