渐变边框

https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image

border-image: linear-gradient(to bottom, red, green) 1 /*这里相当于boder-width*/;
/*不知为啥，这个好像只对表单元素等有用，但是官方说是给所有元素的*/
/*使用这个就没法用border-radius了*/

瀑布流

最简单粗暴就是用column，但是效果，额，凑合，正常情况还是用js控制。

column: 3 /*列*/ 300px;
column-gap:

/**元素**/
display: block;

表单强调色

accent-color,caret-color

inset居中

在元素高度确定下，inset:0+margin:auto实现居中

给图标加阴影而不是图标盒子模型阴影

filter: drop-shadow(5px, 5px, 5px, black);

简单折叠面板及其动画

<details>
  <summary>
  <p>

裁剪

clip-path

动态为元素content

伪元素 content: attr(data-label)

然后在伪元素依附的元素上加标签data-label值即可

锥形渐变

        @property --angle{
            syntax: "<angle>";
            initial-value: 0deg;
            inherits: false;
        }
        @keyframes ro {
            from{
                --angle: 0deg;
            }
            to{
                --angle: 360deg;
            }
        }
        #r{
            width: 50px;
            height: 50px;
            background-image: conic-gradient(from var(--angle), red, blue, red);
            animation: ro 1s linear infinite;
            border-radius: 1000px;
        }