CSS3特性总结

1.文本阴影text-shadow

text-shadow:偏移量x 偏移量y  模糊度  颜色；

注意：

水平偏移量： 正值向右，负值向左

垂直偏移量：  正值向下，负值向上

模糊度不能为负数

可设置多个text-shadow，每个用逗号分隔

例子:text-shadow:1px  2px  3px  red,2px  3px  4px  pink;

2.边框圆角 border-radius

border-radius:10px 10px 10px 10px/5px 5px 5px 5px;

前面四个是横轴半径，后面四个值是纵轴半径，如果后面四个值不写，纵轴半径默认等于横轴半径

3.盒子阴影 box-shadow 

水平偏移量 +向右 -向左

垂直偏移量 +向下 -向上

模糊度不能为负数

inset可设置内阴影，box-shadow：inset 1px 1px 1px red;

设置box-shadow不会改变盒子大小，不会影响兄弟元素布局

可设置多重边框阴影，增强立体感

4.边框图片boeder-image

路径：border-image-source:url();

图片拆分：border-image-slice:30 30 30 30;//上 右  下 左

 border-image-slice:30 fill;

以上，会将中间裁掉的部分在盒子内平铺

图片拉伸：

border-image-repeat:stretch //默认的拉伸效果

repeat //平铺，不完整显示

round //完整的平铺

边框图片宽度：

border-image-width:并不能改变盒子大小，只能改变边框图片大小

最终的连写：

border-image:url() slice/width repeat;

5.背景大小 background-size

作用：设置背景图片大小

设置方式：background-size:200px  200px; //具体尺寸

     100%  100%; //比例

     100%  auto; //自适应

      auto   100%; //自适应

     cover; //铺满父容器

contain //在父容器中完整显示

6.设置背景原点background-origin

作用：设置背景图片原点位置，这个原点，指的是图片左上角

  也就是重新定义了background-position的显示位置

应用background-origin:content-box；   //以内容左上角为原点

    padding-box; //默认选项，以内边距为原点

    border-box; //以外边距为原点

7.background-clip背景区域裁切（也就是让图片在什么区域内显示）

作用：裁切背景，移动端应用的多

应用：background-clip:padding-box; //padding以外的部分会被裁掉

     border-box; //border以外的部分会被裁掉

     content-box; //content以外的部分会被裁掉

8.多背景background: url()  ,url(),url();

注意：不同的背景，用逗号分隔

 设置多背景的时候，不能再设置背景颜色（不能连写），如有需要，聚单独写background来设置颜色

9.渐变

线性渐变：background-image:linear-gradient(渐变方向开始和结束状态，渐变范围（距离）)

渐变方向：可以是具体方向：to  top

to bottom

to left

to  right

也可以是角度：90deg

例子：

background-image:linear-gradient(

to  right, //从左向右

red  20%, //开始颜色是红色，从盒子宽度20%的位置开始变

green //结尾颜色是绿色

);

注意：如果没有设置background-size，百分比是以盒子宽度为参照设置的，否则是以background-size为参照设置的；

10.径向渐变background-image:radial-gradient(圆点，开始、结束)

注意：径向渐变的百分比是以设置的半径为参照的

圆心位置设置：关键词：center/left.......

具体值：第一个值代表水平方向，第二个垂直，第二个如果不设置，默认Center 

例子：

background-image:radial-gradient(

100px  50px  at center, //第一个是水平半径，第二个是垂直半径，第三个是圆心，意思是在盒子中心

red  20%, //在圆的半径20%的位置开始变

green

);

11.过渡trasition

11.1补间动画

过渡属性：transition-property:all //默认全部

width

htight

.....多个属性用逗号分隔

过渡执行总时间：transition-duration:  ;

动画执行速度（类型）transition-timing-function:linear //匀速

   ease

   ease-in

  ease-out

 ease-in -out

动画延时时间：transition-delay:  ;

注意：transition一般放在开始状态里。

11.2帧动画

12.2D转换

transiform:translate(x,y) //第一个值是水平，第二个垂直

旋转：transform:rotate(deg); //正值是顺时针，负值是逆时针

缩放：trasorm:scale(倍数）； //整数（>1）放大，小数（<1）缩小

倾斜:transform:skew(deg,deg); //水平，垂直

旋转原点：transform-origin：center; //默认

left;

right;

bottom;

top;

13.3D转换

左手法则：左手握住旋转轴，拇指指向旋转轴方向，四指指向的方向就是正方形。

13.1 3D转换分类

transform: translateX() translateY() translatrZ(); //位移

例子：

transform:translateX(100px) translateY(100px)   translateZ(100px);

 

transform:rotateX() rotateY() rotateZ(); //旋转

transform:scaleX() scaleY() scaleZ(); //缩放

14.透视  perspective

作用：辅助了解3D效果，不是必须的步骤

取值：600-1200px是人眼最舒服的状态

设置方式：将该属性作为父元素的单独属性设置

将perspective作为transform的属性设置

transform:perspective(100px) translateX(100px);

15.动画

语法：

@keyframes scale{

from{}

to{}

}

通过animation:;调用动画，哪个元素调用，就写在哪里。

调用动画名称：animation-name:;

设置动画完成时间：animation-duration:;

设置动画执行次数：animation-interation-count:infinite; //一直执行

   具体时间，如2s

   默认执行1次

设置延时执行时间：animation-delay:;

动画执行类型（速度）：animation-timing-function:linear;

ease;

ease-in;

ease-out;

ease-in-out;

动画逆波（是否有反向运动）：animation-direction:normal;

reverse; //反向

alternate; //正常执行

alternate-reverse;

设置动画时间之外的状态：animation-play-state:running； //默认

    paused; //暂停

转为3D盒子：transform-style:preserve-3d;

steps(); //步长

---