圆角、透明、渐变、鼠标

1. 圆角

border-radius 圆角，让矩形盒模型拥有圆弧边缘；

取值通常使用百分比值 或 像素值 ；

值最多可为4个：

四个值： 左上 右上 右下 左下

三个值：左上 右上左下 右下

两个值：左上右下 右上左下

一个值：四个角同一值

圆角可以分解为更细的分解属性，比如左上角：border-top-left-radius

2. 阴影

box-shadow盒子阴影，让盒子四周产生阴影；

div{
    box-shadow:10px 5px 10px 5px red outset;
    /*
        第一个值：水平偏移（必需）
        第二个值：垂直偏移（必需）
        第三个值：模糊距离（可选，默认0）   从扩散边缘开始，向外逐渐模糊的距离
        第四个值：扩散距离（可选，默认0）   规则从何处开始模糊，默认0也就是盒子边，大于0则会看到阴影明显漏出，允许负值
        第五个值：隐藏颜色（可选，默认黑色）
        第六个值：阴影扩散方向（可选，默认ouset向外扩展，可以改为inset向内扩展）
    */
}

3. 透明

opacity属性规定元素的透明度，取值 0（完全透明） ~ 1（完全不透明）；

在IE8及以下使用filter:alpha(opacity=值); 值可以为 0（完全透明） ~ 100（完全不透明）；

4. 渐变色

在CSS3的渐变色属性出来之前这一效果只能借助设计师的图片来进行装饰，这样会平白给页面增加了一些http请求次数并增大了页面体积，最终导致延长页面的加载时间。而渐变色属性的出现则很大程度上解决了该问题。

• 线性渐变

  • 基础写法

  /*百分比值也可以用确却的像素值代替*/
  background: linear-gradient(red 0
  
  
  方向控制 渐变方向默认从上往下（to bottom），我可以在写颜色值之前加上方向控制：
  
  /*向下 默认*/
  background: linear-gradient(to bottom, #fb3664 0
  /*
  向上 to top
  向右 to right
  向左 to left
  向右上角 to right top
  向右下角 to right bottom
  向左下角 to left bottom
  向左上角 to left top
  */
  还可以使用角度值来指定方向（默认向下相当于180deg）：
  backgorund: linear-gradient(45deg, #fb3664 0
  
  多颜色写法
  
  渐变允许多种颜色过渡
  background: linear-gradient(#fb3664 0
  
  特殊简写
  
  不写百分比位置值时，默认会平均分配：
  background: linear-gradient(#fb3664, #ff6600, #4af5db);
  /*等价于*/
  background: linear-gradient(#fb3664 0
  

• 径向渐变

  background:radial-gradient(rgb(182, 68, 167) 0
  
  background-image: radial-gradient(shape size at position, start-color, ..., last-color);
  
  /*
  shape 确定圆的类型:
  ellipse (默认): 指定椭圆形的径向渐变。
  circle ：指定圆形的径向渐变
  size  定义渐变的大小，可能值：
  farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
  closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
  closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
  farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
  position  定义渐变的位置。可能值：
  center（默认）：设置中间为径向渐变圆心的纵坐标值。
  top：设置顶部为径向渐变圆心的纵坐标值。
  bottom：设置底部为径向渐变圆心的纵坐标值。
  */
  

• 渐变色重复

  repeating-linear-greadient 和 repeating-radial-gradient 可以让设置的背景色重复。

  background: repeating-linear-gradient(45deg,red 0px,red 20px,blue 20px,blue 40px);