Web前端学习—基础篇，33_CSS3背景属性：多背景、渐变、多列布局、过渡效果——transition属性、2D|3D变换——transform属性、calc

6.5、css3背景属性

6.5.1、多背景

background-image: url(图片路径), url(图片路径);

多背景中背景图书写越靠前，显示越靠前

6.5.2、background-size属性 背景图尺寸

• background-size: 数值; 按比例缩放

• background-size: cover;覆盖，等比例缩放背景图片到铺满盒子，背景图可能无法完整显示在盒子中

• background-size: contain; 包含，等比例缩放背景图片到完整显示在盒子中，背景图在区域范围内可能铺不满

background-size: 100px;/* 等比例缩放 */
background-size: 100px 200px;/* 根据尺寸缩放 */

6.5.3、background-clip属性 背景的绘制区域

• background-clip: content-box; 背景被裁剪到内容区域，仅在内容区域显示

• background-clip: padding-box;背景被裁剪到内填充区域，在内容、内填充区域显示

• background-clip: border-box;背景被裁剪到边框区域，在内容、内填充、边框区域显示，默认值

6.5.4、background-origin属性 背景图片的定位区域

• background-origin: content-box; 背景图片相对于内容来定位
• background-origin: padding-box; 背景图片相对于内填充来定位，默认
• background-origin: border-box; 背景图片相对于边框来定位

6.5.5、渐变

• 线性渐变 linear-gradient

background-image: linear-gradient(方向, 颜色1 范围1, 颜色2  范围2,...);
    方向：left|right top|bottom、ndeg(n数值，正值沿着顺时针方向)

重复线性渐变：
background-image: repeating-linear-gradient(方向, 颜色1 范围1, 颜色2  范围2,...);

• 径向渐变 radial-gradient

background-image: radial-gradient(中心位置, 渐变形状, 颜色1 范围1, 颜色2 范围2,...);
    中心位置：left|center|right  top|center|bottom、x y
    渐变形状：circle圆、ellipse椭圆形（默认值）

重复径向渐变：
    background-image: repeating-radial-gradient(中心位置, 渐变形状, 颜色1 范围1, 颜色2 范围2,...);

6.5.6、resize属性 用户是否可以手动调整元素的尺寸

• resize: none; 不允许用户调整元素尺寸

• resize: both; 用户可以调整元素的宽度和高度

• resize: vertical; 用户可以调整元素的高度

• resize: horizontal; 用户可以调整元素的宽度

 属性生效必须与overflow属性组合使用，属性值可以是hidden|auto|scroll

6.5.7、box-sizing属性 以特定的方式定义匹配某个区域的特定元素

• box-sizing: border-box; 从已设置好的width属性和height属性中减去border、padding值，得到内容的宽度和高度

• box-sizing: content-box; 在width属性和height属性之外绘制border、padding，默认值

6.5.8、多列布局

• column-count属性 列数

  column-count: n; 内容划分为n列
  column-count: auto; 由其他属性决定列数

• column-width属性 列宽

 columnt-width: npx; 每列的宽度为npx
 column-width: auto; 由其他属性决定宽度

• column-gap属性 列间隔

  column-gap: npx; 两列之间的间隔为npx
  column-gap: normal; 常规值，1em

• column-rule属性 列与列之间的分割线

column-rule: column-rule-width  column-rule-style  column-rule-color;
      column-rule-width属性 分割线的宽度
      column-rule-style属性 分割线的线型（solid   double  dotted dashed）
      column-rule-color属性 分割线的颜色

• column-span属性 跨列合并

column-span: all; 横跨所有列合并

6.5.9、过渡效果——transition属性.

transition: transition-property  transition-duration  transition-timing-function  transition-delay;
transition: css属性                执行时间（单位s|ms）    速度类型                   延迟时间（s|ms）
    1s = 1000ms
    css属性：all表示所有属性
    速度类型：linear匀速、ease平滑过渡,默认值、ease-in加速、ease-out减速、ease-in-out先加速后减速

 要显示过渡效果，必须要有执行时间，否则执行时间默认为0，不产生过渡效果

transition: width 3s, background-color 1s;

6.5.10、2D|3D变换——transform属性

(1）2D变形

• transform: translate(x,y) 平移

    transform: translate(100px,0);/* 100px水平向右移动 */
    transform: translate(-100px,0);/* -100px水平向左移动 */
    transform: translateX(-100px);沿着水平方向位移

    transform: translate(0,100px);/* 100px垂直向下移动 */
    transform: translate(0,-100px);/* -100px垂直向上移动 */
    transform: translateY(-100px);/* 沿着垂直方向位移 */

    transform: translate(-100px);/* 如果只有一个值，表示沿着水平方向移动 */

• transform: rotate(ndeg) 旋转

    transform: rotate(60deg);/* 沿着顺时针方向旋转 */
    transform: rotate(-60deg);/* 沿着逆时针方向旋转 */

• transform: scale(x,y) 缩放

  x和y的取值0~1之间表示缩小，1表示正常大小，1以上表示放大，负值表示先翻转后缩放

    transform: scale(0.5,1);/* 沿着水平方向缩小 */
    transform: scale(1.5,1);/* 沿着水平方向放大 */
    transform: scaleX(1.5);/* 沿着水平方向缩放 */

    transform: scale(1,0.5);/* 沿着垂直方向缩小 */
    transform: scale(1,1.5);/* 沿着垂直方向放大 */
    transform: scaleY(1.5);/* 沿着垂直方向缩放 */

    transform: scale(1.5,0.5);/* 水平方向放大，垂直方向缩小 */

    transform: scale(2);/* 等比例缩放 */

    transform: scale(-2);/* 先翻转后缩放 */

• transform: skew(x,y) 倾斜

    transform: skew(30deg,0deg);/* 沿着水平方向倾斜 */
    transform: skew(-30deg,0deg);
    transform: skewX(-30deg);

    transform: skew(0deg,30deg);/* 沿着垂直方向倾斜 */
    transform: skew(0,-30deg);
    transform: skewY(-30deg);

    transform: skew(30deg,30deg);/* 沿着水平方向和垂直方向倾斜 */

    transform: skew(30deg);/* 沿着水平方向倾斜 */

transform: scale(2)  rotate(45deg);

• transform-origin属性 调整基点位置

transform-origin: right top;

(2）3D变形

• 3D必备属性——必须放在父元素上

 transform-style: preserve-3d;/* 创建3D空间 */
 perspective: 600px;/* 景深 透视点到元素的距离，也可以让网页产生3D效果 */

• 3D空间的3根轴线

 x轴：水平，向右为正，向左为负
 y轴：垂直，向下为正，向上为负
 z轴：垂直于屏幕，向外为正，向内为负

• 位移

  transform:translateZ(z); 沿着z轴位移
  transform: translate3d(x,y,z);

• 旋转

  transform: rotateX(ndeg);沿着水平方向旋转
  transform: rotateY(ndeg);沿着垂直方向旋转
  transform: rotateZ(ndeg);沿着z轴方向旋转
  transform: rotate3d(x,y,z,ndeg);

• 缩放

  transform: scaleZ(z);沿着z轴缩放
  transform: scale3d(x,y,z);

6.5.11、calc()函数

css3新增功能，用于动态计算长度值

特点：

流体布局：屏幕分辨率变化，页面中元素的大小也会变化，但是布局不变

• 语法

calc(表达式)
    可用来实现加、减、乘、除四则运算
    width: calc(100px + 100px);
    width: calc(100px+ 100px);  语法错误
    width: calc(100px +100px); 语法错误
    width: calc(100px+100px); 语法错误

运算符的前后需要添加空格

width: calc(2 * (100px + 100px));

运算规则：有括号先算括号里面的，先乘除后加减

• 兼容

  在IE9、firefox、chrome、Safari可以正常呈现

• 利用calc函数实现自适应三列布局