CSS3学习笔记

一、新增盒子属性

1、怪异盒模型 box-sizing

content-box width和height设置的是盒子内容区的大小（默认值）
border-box width和height设置的是盒子总大小（怪异盒模型）

2、resize可以调节盒子大小

none 不允许用户调整大小
both 用户可以调节匀速的宽度和高度
horizontal 用户可以调节元素的宽度
vertical 用户可以调节元素的高度
配合overflow使用一般使用overflow：hidden；

3、box-shadow盒子阴影

box-shadow：h-shadow v-shadow blur spread color inset；

h-shadow 水平阴影的位置，可以为负值（必填）
v-shadow 垂直阴影的位置，可以为负值（必填）
blur 模糊距离（可选）
spread 阴影的外延值（可选）
color 阴影的颜色（可选）
inset 将外部阴影改成内部阴影（可选）

transition：1s linear all； #阴影可以缓慢出现

4、opacity不透明度

值是0~1之间的小数，0表示完全透明，1表示完全不透明

二、新增背景相关属性

1、background-origin

设置背景图的原点

padding-box 从padding区域开始显示背景图像（默认值）
border-box 从border区域开始显示背景图象
content-box 从content区域开始显示背景图像

2、background-clip

设置背景图的向外裁剪的区域

padding-box 从padding区域开始向外裁剪背景
border-box 从border区域开始向外裁剪背景（默认值）
content-box 从content区域开始向外裁剪背景
text 背景图只呈现在有文字的地方
若值为text，background-clip要加上-webkit-前缀

3、background-size

设置背景图的尺寸

语法：

用长度指定背景图片的大小

background-size:300px 200px;

用百分比指定背景图片的大小

background-size:100% 100%;

auto 图片真实值的大小
contain 将背景图片等比例缩放，使背景图片的宽或高与容器的宽或高相等（容器部分区域可能没有图片）
cover 使背景图片等比例缩放，直到完全覆盖容器（图片有可能显示不完整）

4、background-复合属性

background:背景颜色背景图片url 是否重复位置/大小 /原点裁剪方式;

5、多背景图

background:url() no-repeat left top,
		   url() no-repeat right top,
		   url() no-repeat left bottom,
		   url() no-repeat left bottom;

三、新增边框属性

1、边框圆角

使用border-radius可以将盒子变为圆角

border-radius：10px； #可以同时设置四个圆角

2、边框外轮廓

outline-width 外轮廓宽度
outline-color 外轮廓颜色
outline-style 外轮廓风格
- none 无轮廓
- dotted 点状轮廓
- dashed 虚线轮廓
- solid 实线轮廓
- double 双线轮廓
outline-offset 设置外轮廓与边框的距离，正负值都可以设置

三、新增文本属性

1、文本阴影

text-shadow：h-shadow v-shadow blur color；

h-shadow 水平阴影的位置，可以为负值（必填）
v-shadow 垂直阴影的位置，可以为负值（必填）
blur 模糊距离（可选）
color 阴影的颜色（可选）

2、文本换行

white-space属性设置文本换行方式

normal 文本超出边界自动换行
pre 原样输出
pre-wrap 在pre效果基础上，超出元素边界自动换行
pre-line 在pre效果的基础上，超出元素边界自动换行。且只识别文本中的换行，空格会忽略
nowrap 强制不换行

3、文本溢出

text-overflow属性设置文本内容移除时的呈现模式

clip 当内联内容溢出时，将溢出部分裁剪掉
ellipsis 当内联内容溢出块容器时，将一处部分替换为…
overflow必须为非visible的值
white-space为nowrap

4、文本描边

-webkit-text-stroke:3px red;

四、2D变换

1、位移

transform：translateX(50px);
transform：translateY(50px);
transform：translate(50px,50px);
相对定位百分比值参考的是其父元素，定位的百分比值参考的是其自身
位移对行内元素无效

2、缩放

transform：scaleX(1.5);放大
transform：scaleY(0.5);缩小
transform：scale(1.5);

3、旋转

transform：rotate(20deg);
正值顺时针，负值逆时针

4、扭曲

transform：skewX();设置元素在水平方向扭曲，值为角度值
transform：skewY();设置元素在垂直方向扭曲，值为角度值
transform：skew();

5、多重变换

可以同时用一个transform来编写
transform：translate() scale() rotate();
建议把旋转放在最后

6、变换原点

transform-origin：50% 50%;
变换原点在元素的中心位置，百分比是相对于自身的
transform-origin：left top;
变换原点在元素的左上角
transform-origin：50px 50px;
变换原点距离元素左上角50px 50px的位置。

五、3D变换

1、3D空间与景深

（1）开启3D空间
元素进行3D变换的首要操作是为其父元素开启3D空间

transform-style：perspective-3d;

（2）设置景深
即指定观察者与xy平面的距离，能让发生3D变换的元素产生透视效果，使得看起来更加的立体。

perspective：长度值;

注意：perspective设置给发生3D变换的父元素

2、透视点的位置

透视点的位置就是观察者的位置
使用perspective-origin设置透视点的位置，默认的透视点在元素的中心。

3、位移

3D位移是在2D的基础商，可以让元素沿着Z轴位移

transform：translateZ() 设置z轴的位移，正值向屏幕外，负值向屏幕内，且不能写百分比
transform：translate3d() 第一个参数对应x轴，第二个参数对应y轴，第三个参数对应z轴，且均不能省略

4、旋转

可以让元素沿x轴y轴旋转

transform：rotateX()
transform：rotateY()
transform：rotate3d(1,1,1,30deg)前三个参数分别表示坐标轴，第四个参数表示旋转的角度，参数不允许省略

5、缩放

可以让元素沿z轴缩放

transform：scaleZ() 相当于修改景深
transform：scale3d()第一个参数对应x轴，第二个参数对应y轴，第三个参数对应z轴，参数不允许省略

6、多重变换

transform：translateZ(100px) scaleZ(1 ) rotateY(45deg)

7、背部可见性

六、过渡

1、基本使用

设置那个属性需要过渡效果

transition-property:width,height,background-color;
transition-property:all;

设置过渡的时间

transition-duration:1s;

2、高级使用

过渡延迟

transition-delay:2s;

修改过渡类型

transition-timing-function:;

3、复合属性

如果设置了一个时间，表示duration，如果设置了两个时间，则第一个是duration第二个是delay，其他值并没有顺序要求

transition:过渡类型 需要过渡的属性 时间 延迟;

七、动画

1、基本使用

（1）简单的定义方式

/* 定义一组关键帧 */
<style>
  @keyframes wangyoudong {
    /* 第一帧 */
    from{}
    /* 最后一帧 */
    to{
      transform:translate(900px);
      background-color: red;
    }
  }
  .inner {
    width:100px;
    height: 100px;
    background-color: deepskyblue;
    /* 应用动画到元素 */
    animation-name:wangyoudong;
    /* 动画持续的时间 */
    animation-duration:3s;
  }
</style>

（2）完整的定义方式

/* 定义一组关键帧 */
<style>
  @keyframes wangyoudong {
    /* 第一帧 */
    0%{}
    20%{}
    50%{}
    70%{}
    /* 最后一帧 */
    100%{
      transform:translate(900px);
      background-color: red;
    }
  }
  .inner {
    width:100px;
    height: 100px;
    background-color: deepskyblue;
    /* 应用动画到元素 */
    animation-name:wangyoudong;
    /* 动画持续的时间 */
    animation-duration:3s;
  }
</style>

2、其他属性

设置动画的类型

animation-timing-function

设置动画的播放次数

animation-iteration-count:number(动画循环次数)/infinite(无限循环);

动画的方向

animation-direction:normal(正常)/reverse(反转)/alternate(往复运动)

设置动画之外的状态

animation-fill-mode:forwards(设置对象状态为动画结束时的状态)/backwards(设置对象状态为动画开始时的状态);

设置动画的播放状态

animation-play-state:running(运动)/paused(暂停);

3、动画的复合属性

animation:
属性值规则同过渡

八、多列布局

1、多列文字

直接指定列数

column-count：5；

指定列宽，会自动计算列数

column-width：220px；

每一列边框宽度

column-rule-width：2px；

每一列边框风格

column-rule-style：dashed；

每一列边框颜色

column-rule-color：red；

边框复合属性

column-rule：2px dashed red；

标题横跨所有列

h1 {
	column-span：all;
	text-align：center;
	font-size:50px;
}

2、多列图片

img  {
	width:100%  #表示宽度为所在列的列宽的100%
}