初识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: 增长比例 对剩余部分进行 分块分配增长