边框属性，背景属性，渐变

1、边框 - 阴影、轮廓


   1、边框阴影
      属性:box-shadow
      取值：多个属性值所组成的列表
         h-shadow : 阴影的水平位置(水平位置偏移量),取值为正 向右偏移，取值为负，向左偏移
v-shadow : 阴影的垂直位置(垂直位置偏移量),取值为正 向下偏移，取值为负，向上偏移




blur : 可选属性，阴影的模糊距离
spread : 可选 阴影尺寸
color:可选 阴影颜色
inset : 可选，将外部阴影改为内部阴影

box-shadow:h-shadow v-shadow blur spread color inset;


box-shadow:h-shadow v-shadow blur color;


   2、轮廓


      属性：outline
      取值：width style color;


      单属性: 
        outline-width  : 轮廓宽度
outline-style : 轮廓的样式
outline-color : 轮廓的颜色
      常用模式：outline:0;


2、框模型
   1、什么是框模型
      Box Model 框模型，俗称 盒子模型、方框属性...
      定义了”元素框“处理元素内容、内边距、边框和外边距的方式。
      元素框：页面中所有的html元素 都可以被称为"元素框"


      外边距 ：cellspacing
      内边距 ：cellpadding




      注意：当框模型介入到元素中来的时候，元素的实际宽度和高度 是会发生改变的。
      元素的实际宽度 = 左右外边距 + 左右边框 + 左右内边距 + width;
      元素的实际高度 = 上下外边距 + 上下边框 + 上下内边距 + height;


   2、外边距
      1、什么是外边距
         围绕在元素"边框周围"的"空白区域"就是外边距
      2、属性
         属性：margin
取值：
     单位：
         px : 具体像素值  margin:10px;
 % : 父容器的宽或高的占比
 auto : 只对左右方向起作用,设置元素水平居中对齐 
 负值：向着相反的方向移动元素
     数量：
        1个值：上下左右四个方向的外边距
       margin:10px;
2个值：上下外边距    左右外边距
margin:5px 10px;
3个值：上外边距 左右外边距 下外边距
margin:2px 10px 5px;
4个值：上 右 下 左






 单边设置：
      margin-left:左外边距
      margin-right:右外边距
      margin-top:上外边距
      margin-bottom:下外边距
      3、具备默认外边距的元素
          p,h1,h2,~,h6,body,dl,dt,dd
      4、两个问题
         1、外边距合并问题
   当两个垂直外边距相遇时，他们将形成一个外边距，称为外边距合并。最终以外边距较大的值为准。
2、外边距的溢出
   在父子元素中，设置子元素的上外边距时，有可能会被识别是 父元素的上外边距
   解决方案：
   1、给父元素增加边框
  
   3、内边距
      1、什么是内边距
         内容区域和边框之间的空间距离


注意：会扩大元素边框所占用的区域
      2、属性
         属性：padding
取值：
    单位：
         px ：具体数值、
 % : 父元素的宽或高的占比
    数量：
        1个值 ：上下左右
2个值 ：上下  左右
3个值 ：上  左右  下
4个值 ：上 右 下 左
单方向:
    padding-left
    padding-right
    padding-top
    padding-bottom
特殊使用场合：
   想扩大行内元素的宽度或高度的话，可以通过 内边距来做


2 * 14


0 * 12 ==> 20 * 20
左右：10px 内边距
上下：4px 内边距


3、背景属性
   1、背景颜色
      属性：background-color
      取值：颜色单位值
      注意：背景(颜色、图像)默认是从边框位置处开始绘制 
   2、背景图片
      1、属性
         background-image
      2、取值
         url("图像的url");
url('图像的url');
url(图像的url);

background-image:url(Images/xxx.jpg);
   3、背景重复(平铺方式)
      属性：background-repeat
      取值：
   repeat : 默认值，水平和垂直平铺
   repeat-x : 仅 水平平铺
   repeat-y : 仅 垂直平铺
   no-repeat : 不平铺(用的最多)
   4、背景图片尺寸
      属性：background-size
      取值：
           value1 value2 : 宽度  高度
  value1% value2% : 当前元素的宽和高的占比
  cover : 覆盖，将背景图扩大，当背景图完全覆盖到元素区域时停止。
  contain : 包含，将背景图扩大，使背景图片的宽或高适应元素尺寸为止


   5、背景图片固定
      默认情况，背景图像会随着滚动条而发生滚动
      可以通过背景图片固定的方式 解决此问题，让背景图保持在网页的可视化窗口的某个固定为止处不随着滚动条发生位置改变


      注意：尽量将背景图片 加给 body 元素


      属性：background-attachment
      取值：
            scroll : 默认值，滚动
   fixed : 固定
   6、背景定位
      1、什么是背景定位
         改变 背景图像 在元素中的位置
      2、属性 
         background-position


取值:
  x y : x表示的是水平位置，取值为正，背景图片向右移动，取值为负 向左移动，y表示的是垂直位置，取值为正，向下移动，取值为负 向上移动
  x% y% :
      0% 0% 左上角
      100% 100% 右下角
      50% 50% 居中
  x 可以被以下关键字取代：
     left , center , right
  y 可以被以下关键字取代：
     top , center , bottom


CSS Sprite ： 将多幅背景图像 合并到一幅图像中来，从而减少对服务器的请求次数


操作步骤:
1、根据想要看的图像，在页面创建一个与它一模一样大小的元素
2、通过 background-position 对大图进行位置的移动 ，正好 将 想看到的小图 放到 创建好的元素中去
   7、背景属性
      属性：background
      取值：color url() repeat attachment position;


      background-color:red;
      background:red;


      常用方式：
         background:url(图片地址) no-repeat position;


background:url(Image/iconlist_1.png) no-repeat -119px -239px;
4、渐变
   1、什么是渐变
      渐变 ， 指的是 两种或多种颜色颜色之间的平滑过渡
   2、语法
      属性:background-image
      取值:
           linear-gradient() : 线性渐变






  radial-gradient() : 径向渐变
  repeating-linear-gradient() : 重复线性渐变
  repeating-radial-gradient() : 重复径向渐变
   3、线性渐变
      函数:linear-gradient(angle,色标1,色标2...)
        angle ：指定渐变的方向 或 角度
 方向：
    to top : 向上 渐变 --> 0deg
    to right : 向右 渐变 --> 90deg
    to bottom : 向下 渐变 --> 180deg
    to left : 向左 渐变 --> 270deg
    
 角度:0deg ~ 360deg
色标 ：颜色 位置
  颜色 ：#rgb , #rrggbb , ....
  位置 ：具体数值 / %


  red 0px : 开始时是红色
  green 50px : 到第50px处 变成绿色
   4、径向渐变
      函数 : radial-gradient([size at position],色标1,色标2,....);
        [size at position]:
  可以省略该组参数，默认半径自己调整，圆心位置位于元素得到中见面位置处


  size:指定创建 圆的半径
  position : 圆心位置,具体数值，%，关键字
   5、浏览器兼容性
      对于不支持的浏览器版本 ，需要添加不同的浏览器前缀来解决 渐变的问题
      Firefox : -moz-
      Chrome 和 Safari : -webkit-
      Opera : -o-


      #d1{
background-image:linear-gradient(to top,red 0% , blue 100%);

/*Firefox 低版本*/
background-image:-moz-linear-gradient(to top,red 0% , blue 100%);


/*Chrome 和 Safari 低版本 */
background-image:-webkit-linear-gradient(to top,red 0% , blue 100%);


/*Opera 低版本*/
background-image:-o-linear-gradient(to top,red 0% , blue 100%);
      }