初识CSS（三）

CSS3

1.border-radius: 100px 50%

2.box-shadow: x偏移量 y偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 内阴影；

3.渐变

backgroud-image:

linear-gradient( ) 线性渐变

repeating-linear-gradient( )重复线性渐变

radial-gradient（） 径向渐变

4.2D转换,3D转换（翻转）

transform：

rotate(deg)

scale（1.5,1） 图形缩放 水平方向放大1.5倍

skew（30deg，20deg） 扭曲

translate(Xpx,Ypx)

rotateX()

ratateY()

5.多函数形变

rotate(deg) skew(Xdeg,Ydeg) scale(X倍数，Y倍数)

6.过渡（可以改变多个参数）

transition-property 改变内容

transition-duration 时间 s

transition-timing-function 过渡效果的时间函数 默认：ease（缓慢）

transition-delay 延迟 多长时间后开始执行 s

7.动画

@keyframes first{

0%{} (时间的百分比)

25%{}

...

}

8.弹性盒子模型

8.1方向

主轴方向

交叉轴方向

8.2父标记中必须有定义：display：flex;

8.3父标记属性

• flex-direction: 方向

row；正向

row-reverse；

column；柱形

• flex-wrap： 不想要自动弹性压缩

nowrap 默认换行

wrap 在父级别中加，不换行

wrap-reverse；反向换行，换行到上方

• justify-content: 对齐方式

sapce-between; 两端对齐

space-around;两端间隔对齐

flex-start

flex-end

• align-items

flex-start

flex-end

center

8.4项目属性

• order

数字（矢量值）

• flex

相当于flex-grow;1(增长了1)

• align-self 定义自己的位置

flex-grow: 增长比例 对剩余部分进行 分块分配增长