多列布局

列数、列宽

columns:3 5em;      执行最少列数（复合）
column-count:3;     列数
column-width:5em;   列宽

设置列之间缝隙

column-gap:3em;设置列之间的缝隙存在兼容问题
-webkit-column-gap: 3em;
-moz-column-gap: 3em;
column-gap: 3em;     通常这样写

缝隙分割线样式

column-rule:1px solid blue;    （复合形式）
column-rule-width:1xp;          宽
column-rule-style:dashed;       样式
column-rule-color:red;          颜色

box-shadow

    盒子阴影
    box-shadow:水平位移 垂直位移 模糊程度 颜色;
    box-shadow:insert 5px 5px 5px red;              insert 可以设置内阴影
    box-shadow:-5px -5px 5px red,5px 5px 5px blue;  可以写多个值  中间用逗号分隔

back-ground

背景图片 background-img

背景图无法撑起元素的高度
    background-size:contain;图片完全放入到元素中，但是图片的长宽比可能会产生留白风险
    background-size:cover;  图片完全填充到元素中，可能有部分图超出元素看不到。
    background-size:300px 300px;可以单独设置宽高，可能会使图片比例失调

设置背景图原点位置与裁剪

background-origin:设置背景图原点的位置
                    border-box  从border左上角开始
                    padding-box 从padding左上角开始
                    content-box 从content左上角开始
background-clip:对背景图进行裁剪，超出的部分不要
                    border-box  从border左上角开始
                    padding-box 从padding左上角开始
                    content-box 从content左上角开始                      

背景渐变

background:linear-gradient(red,blue)   线性渐变
           linear-gradient(to right,red,blue) to right 表示方向   也可改为90deg
           linear-gradient(90deg,red 20%,blue 20%)   线性分层渐变

background:radial-gradient(red,blue)   径向渐变
background:radial-gradient(at 0 0,red,blue) at 可以设置圆心位置  如果直接写两个数字px，则代表横轴渐变和纵轴渐变的大小
如果容器不是正方形  则以椭圆的方式进行渐变   可以设置circle属性进行圆形渐变
background:radial-gradient(circle,red,blue)

transform

transform:代表标签的形变
          translate  位移   translateX translateY translateZ
          rotate     旋转 通常围绕Z轴   deg
          scale      缩放 默认值是1
          skew       倾斜 deg
示例：
                transform: translate(100px, 100px);
                transform: rotate(180deg);
                transform: scale(0.5);

                transform: skewY(45deg);

transform-origin   形变参考点  主要针对旋转使用

animation

animation-name:动画名称
animation-duration:动画时间
animation-iteration-count:动画次数     infinite（无限）
animation-delay:动画延迟

animation-direction:是否返程     alternate-reverse;
animation-timing-function:linear   速度曲线
animation-play-state:paused/running 播放与暂停
animation-fill-mode:forwards动画结束时应用最后一帧的属性 
                    backwards延迟时应用第一帧属性

标签（空格分隔）： 未分类

在此输入正文