初识CSS--常用元素总结(四)-边框与背景

1. 背景

• background-color （背景颜色）

      属性值：
          颜色          指定颜色的值
          transparent  背景色为透明色
  

• background -image（背景图片）

      属性值：
          none         取消背景图片设置
          URL          背景图片的路径
  

• background- repeat（背景平铺方式）

       属性值：
           no-repeat    禁止平铺图像
           repeat-x     水平方向平铺
           repeat-y     竖直方向平铺
           repeat       水平和竖直方向同时平铺
  

• background-position（背景图片的位置）

      属性值：
          top            将背景图片定位到元素顶部
          left           将背景图片定位到元素左部 
          right          将背景图片定位到元素右部
          bottom        将背景图片定位到元素底部
          center        将背景图片定位到元素的中间
          数字+px        将背景图片偏移指定的距离
          数字+%         将背景图片偏移指定的百分比（相对于父控件） 
  
      该属性能多个值同时设定，例如要定位到右下角则有：“bottom，right” 
  

• background-size（背景大小）

   属性值：
       auto       默认值，图像以原尺寸显示大小
       cover      等比例缩放图片，使得图片图片至少能覆盖容器，但有可能超出容器
       contain    等比例缩放图像，使其宽度、高度中较大者与容器横向或纵向重合
      数字+px   指定长度的大小
      数字+%   指定大小为相对于父控件的大小
  

• background-attachment（背景滚动方式）

   属性值：
       scroll   默认值，背景固定在元素上，不进行滚动
       fixed   背景固定在视窗上，拖动滚动条背景不动，水印效果
  

• background-origin（背景图片起始位置）

  属性值：
      border-box      在元素盒子内部绘制背景图片
      padding-box     在内边距盒子内部绘制背景图片
      margin-box      在外边距盒子内部绘制背景图片
      content-box     在内容盒子内部绘制背景图片
  

• background-clip（背景图片的剪裁）

  属性值：
       border-box     在元素盒子内部剪裁背景
       padding-box    在内边距盒子内部剪裁背景
       content-box    在内容盒子内部剪裁背景图片
  

• background属性简写形式：

  属性顺序：
  [background-color]
  [background-image]
  [background-repeat]
  [background-attachment]
  [background-position] / [ background-size]
  [background-origin]
  [background-clip]
  

2. 边框

1.  声明边框 ：
        border-width   边框宽度 :  
        数字+px         指定边框宽度宽度
        数字+%          指定边框宽度为相对于父控件的百分比
        thin           细边框
        medium         中等边框
        thick          厚边框

    border-style     边框样式：

        样式名称    规定好的边框样式

        none       没有边框
        dashed     破折线边框
        dotted     圆点线边框
        double     双线边框
        groove     槽线边框
        inset      使元素内容具有内嵌效果的边框
        outset     使元素内容具有外凸效果的边框
        ridge      脊线边框
        solid      实线边框

1. 圆角边框：

   border-top-left-radius         左上角圆角边框的半径
   border-top-right-radius        右上角圆角边框的半径
   border-bottom-left-radius      左下角圆角边框的半径
   border-bottom-right-radius     右下角圆角边框的半径
   border-radius                  四条边角
   
   属性值均为：
       数字+px    指定大小的长度
       数字+%     指定相对于父控件的长度