# 与 css 相关，多学习 css

## css inset
-   inset : top | right| bottom | left
-   使用例：
    ```css
    .className {
        inset: 4px 8px; /* 上下 | 左右 */
        inset: 5px 15px 10px; /* 上 | 左右 | 下 */
        inset: 2.4em 3em 3em 3em; /* 上 | 右 | 下 | 左 */
    }
    ```
## css 过渡 transition
-   有transition-property、transition-duration、transition-timing-function 和 transition-delay这几个属性，不过一般使用时应该都是用transition合起来写。
-   使用例：

    ```css
    .className {
        /* property name | duration | timing function | delay */
        transition: margin-right 4s ease-in-out 1s;

        /* Apply to 2 properties */
        transition: margin-right 4s, color 1s;
    }
    ```

## css 动画 滚动条驱动
-   animation-timeline
-   有时间再写

## css 动画

-   分为“定义”与“使用”两个阶段。
-   “定义”阶段的 keyword 为@keyframes，例：

    ```scss
    // 每个时间点填对应时间点的style
    @keyframes animationName {
        0% {
            border-radius: 1px;
        }
        50% {
            border-radius: 12px;
        }
        100% {
            border-radius: 123px;
        }
    }
    ```

-   “使用”阶段的 keyword 为 animation，使用 animation 绑定动画，例
    ```scss
    div {
        animation: animationName 5s;
    }
    ```
-   animation 有许多属性

    ```scss
    div {
        // 绑定的动画名
        animation-name: animationName;
        // 动画执行总时长
        animation-duration: 5s;
        // 速度曲线。默认是 "ease"。
        animation-timing-function: linear;
        animation-delay: 2s;
        // 播放次数，默认1
        animation-iteration-count: infinite;
        // 是否在下一个周期逆向播放
        animation-direction: alternate;
        // 是否正在播放（）
        animation-play-state: running;
        // 简写
        animation: animationName 5s linear 2s infinite alternate;
        // 多个动画之间使用逗号进行隔开
        animation: a1..., a2...;
    }
    ```

## before 与 after

-   伪元素，通过 content 来指定内容，before 就是在前面，after 就是在后面（哇好有道理呢）
-   用途一般是加个 icon 啥的，content 可以为 url(...)
-   不能应用在替换元素上，比如 `<img>`
-   伪元素不支持嵌套，也就是说伪元素的父元素不可以为伪元素
    使用例：

    ```css
    a {
        color: #0000ff;
        text-decoration: none;
    }

    a::before {
        content: '🔗';
    }
    ```

-   使用 inherit 使子元素拥有与父元素相同的特定属性值
    使用例：

    ```css
    div {
        position: relative;
        background: url('your-image-url.jpg');
    }

    div::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        background: inherit;
        z-index: -1;
    }
    ```

## !important 相关

-   不到万不得已不要用，是不好的写法
-   如果你的 important 不够 important,那可以写 class 的时候多写点前缀，例：

    ```scss
    // 一般
    .ant-slider-rail {
        background-color: rgb(141, 93, 56) !important;
    }
    // 优先级特别高
    .slider .ant-slider .ant-slider-rail {
        background-color: rgb(141, 93, 56) !important;
    }
    ```

## xx[a=xxx]的使用

-   这玩意叫属性选择器
-   案例：

    ```css
    a {
        color: blue;
    }

    /* 以 "#" 开头的页面内部链接 */
    a[href^='#'] {
        background-color: gold;
    }

    /* 包含 "example" 的链接 */
    a[href*='example'] {
        background-color: silver;
    }

    /* 包含 "insensitive" 的链接，不区分大小写 */
    a[href*='insensitive' i] {
        color: cyan;
    }

    /* 包含 "cAsE" 的链接，区分大小写 */
    a[href*='cAsE' s] {
        color: pink;
    }

    /* 以 ".org" 结尾的链接 */
    a[href$='.org'] {
        color: red;
    }

    /* 以 "https" 开始，".org" 结尾的链接 */
    a[href^='https'][href$='.org'] {
        color: green;
    }
    ```

    -   属性不一定要是 href 什么的，自己定也没关系。
    -   案例：

    ```css
    /* 将所有包含 `lang` 属性的 <div> 元素的字重设为 bold */
    div[lang] {
        font-weight: bold;
    }

    /* 将所有语言为美式英语的 <div> 元素的文本颜色设为蓝色 */
    div[lang~='en-us'] {
        color: blue;
    }

    /* 将所有语言为葡萄牙语的 <div> 元素的文本颜色设为绿色 */
    div[lang='pt'] {
        color: green;
    }
    ```