css3用法

选择器

p:first-child   // <p>是父级第1个子级
p:last-child   // <p>是父级倒数第1个子级
p:nth-child(n) // <p>是父级第n个子级
p:nth-last-child(n) // <p>是父级倒数第n个子级
p:nth-child(odd)    // 奇数
p:nth-child(even)   // 偶数

p:first-of-type     // <p>是父中第一个p
h1:last-of-type     // <h1>是父中最后一个h1
p:nth-of-type(n)
p:nth-last-of-type(n)

渐变色

/* 线向渐变 linear-gradient */
div {
    background-image: linear-gradient(#e66465, #9198e5);
}

/* 径向渐变 */
div {
    background-image: radial-gradient(red, yellow, green);
}

transform

/* 2D平移 translate(x, y) */
div {
    transform: translate(10px, 10px);   /* 向右10px，向下10px */
}

/* 2D旋转(顺时针) rotate(angle) */
div {
    transform: rotate(90deg);   /* 顺时针90度 */
}

/* 2D缩放 scale(x, y) */
div {
    transform: scale(2, 3);     /* 宽度扩大2倍，高度扩大3倍 */
}

/* transform-origin 缩放基点 */
div {
    transform-origin: x-axis y-axis z-axis;
    transform-origin: 0% top;
}

/* 2D拉伸 skew(x-angle, y-angle) */
div {
    transform: skew(30deg, 20deg);
}

/* 3D平移 translate3d(x, y, z) */
div {
    transform: translate3d(50px, 50px, 50px);
}

/* 3D旋转 rotate3d(x, y, z, angle) */
div {
    transform: rotate3d(1, 0, 0, 30deg);
    transform: rotateX(30deg);  /* 等同于 */
}

/* 3D缩放 scale3d(x, y, z) */
div {
    transform: scale3d(2, 3, 3);
}

/* 3D perspective，作用在父元素，取0-500，可以制造3D效果 */
div {
    perspective: 150;
}

/* 3D perspective-origin，需要与perspective配合才生效 */
div {
    perspective: 150;
    perspective-origin: 10% 10%;
}

过渡动画 transition

div {
   width: 100px;
   height: 100px;
   transition: width 2s, height 2s, transform 2s;
}
div:hover {
    width: 200px;
    height: 200px;
    transform: rotate(180deg);
}

动画 animation

/* 定义动画 */
@keyframes myfirst {
    0% {
        background: red;
    }
    100% {
        background: yellow;
    }
}
/* 应用动画 */
div {
    animation: myfirst 5s linear 2s 1|infinite alternate forwards;
    animation: name duration timing-function delay iteration-count direction fill-mode play-state;
    /* 名字 持续时间 速度 开始前延迟时间 播放次数 奇正偶反播放 动画完成后状态(保持结束后状态)*/
}

calc 计算

div {
    calc(100% - 50px)
}

文字...显示

/* 单行 */
div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* 多行 */
div {
    height: 168rpx;     /* 需要有高度 */
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;  /* 总行数 */
    overflow: hidden;
}

滚动条（高版本浏览器才支持）

// 隐藏滚动条
div::-webkit-scrollbar {
    width: 0;
    height: 0;
}

滤镜

div {
    filter: blur(15px);     // 模糊处理
    filter: grayscale(50%); // 灰度
}

蒙层

div {
    // 注意：透明的地方显示空白，非透明会显示，与常规理解相反
    -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 90%);
}

鼠标点击穿透

div {
    pointer-events: none;
}

瀑布流

.wrap {
    column-count: 3;    // 列数
    column-gap: 20px;   // 列间距
}
.item {
    break-inside: avoid;    // 不知道什么原理
}