CSS3笔记---背景与边框样式

1. 背景样式

• background-clip
  CSS2背景显示范围不包括边框。CSS2.1和CSS3包括边框。
  CSS3可以用background-clip调整背景显示范围：

/**
   * 在FireFox加上-moz-前缀，Safari、Chrome、Opera，加上-webkit-前缀
   */
background-clip: border; //包括边框在内
background-clip: padding; //不包括边框

• background-origin
  指定背景图像绘制起始点

/**
   * 在FireFox加上-moz-前缀，Safari、Chrome、Opera，加上-webkit-前缀
   */
background-origin: border; // 从边框左上角开始绘制
background-origin: padding; // 从内部补白左上角开始绘制
background-origin: content; // 从内容左上角开始绘制

• background-size
  指定背景图像的尺寸

/**
   * 在FireFox加上-moz-前缀，Safari、Chrome、Opera，加上-webkit-前缀
   */
background-size: 40px 20px; // 背景图像宽度40px，高度20px
background-size: 40px auto; // 将一种一个设为auto，维持图像纵横比例
// 图像维持纵横比的前提下，自动缩放至充满元素的宽度或高度
background-size: contain;
// 图像维持纵横比的前提下，自动缩放到填满元素内部。多余部分被剪去 
background-size: cover;

• background-repeat

在CSS2.1时，有no-repeat、repeat、repeat-x与repeat-y4个选项。但是平铺之后超出部分会被直接裁剪掉。
CSS3中，添加了space和round，控制在水平或垂直方向平铺背景，并且不裁剪超出部分，而是以调整平铺图像之间的间距方式（IE8不支持）。

background-repeat: space; // 横线平铺，自动调整图像间间距，不裁剪超出部分
background-repeat: round; // 纵向平铺，自动调整图像间间距，不裁剪超出部分

• 背景渐变

background: linear-gradient(to bottom, orange, black);
background: radial-gradient(orange, black);

2. 边框样式

• 圆角边框

border-radius: 10px; // 半径10px的圆角
border-radius: 10px 20px; // 左上和右下10px，右上和左下20px
border-top-left-radius: 10px; // 左上10px
border-top-right-radius: 20px; // 右上20px
border-bottom-right-radius: 30px;  // 右下30px
border-bottom-left-radius: 40px; // 左下40px

• 图像边框（基本不会用到，不做了解）