CSS3颜色样式

• opacity透明度
  • 区分opacity和transparent（透明）
    • opacity是属性，而transparent是属性值
  • opacity透明度，取值范围为0-1,0是完全透明，1是完全不透明
  • opacity指的是任意视觉效果全部变透明，不区分属性值
• RGBA颜色
  • 区别RGBA中的A与opacity
    • A只针对当前元素设置的某一个属性起作用，也就是哪个属性设置了A，A就对哪个属性起作用
    • opacity就相对来说比较粗鲁，它不管属性，只要是对应元素，就直接透明处理

// 语法
rgba(R,G,B,A)
// 红绿蓝的取值可以是 0-255 也可以是 百分比（0% - 100%）
R : red 红色
G : green 绿色
B : blue 蓝色
A : alpha 透明度  // 与opacity的取值一样

• CSS3渐变(gradient 渐变的)
  • 为页面元素适当添加渐变效果，可以使页面更加美观大方，用户体验感也会更好
  • 线性渐变（见得最多的就是线性渐变）（重点掌握径向渐变就行）
    • 指的是按一条线的方向去产生的渐变效果
    • 语法： background:liner-gradient(方向，开始颜色，结束颜色)
    • 多种颜色用逗号隔开

to top	0deg	从下到上
to bottom	180deg	从上到下（默认值）
to left	270deg	从右到左
to right	90deg	从左到右
to top left	无	从右下到左上
to top right	无	从左下到右上

• • 径向渐变（火狐和谷歌要加上-webkit-前缀）
    • 指颜色从内到外进行的圆形渐变（从中间往外拉，像圆一样），径向渐变是圆形渐变或椭圆形渐变，颜色不在沿着一条直线渐变，而是从一个七点向所有方向渐变
    • 语法： background:radial-gradien(position,shape size,start-color,stop-color）
      • position：用于定义圆心位置(可以取值为长度值，如10px，也可以取值为关键字，如"center"，就是居中)
      • shape：用于定义径向渐变的“形状”，size：用于定义径向渐变的“大小”
      • start-color：开始颜色(内圈颜色)
      • stop-color：结束颜色（外圈颜色）

shape取值
ellipse	椭圆形（默认）
circle	圆形

size取值
closet-side	指定径向渐变的半径长度为从圆心到离圆心最近的边
closet-corner	指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side	指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner	指定径向渐变的半径长度为从圆心到离圆心最近的角