严文彬

[demo](https://codepen.io/xboxyan/pen/oNvwNLE) ```css .ui-content{ width: 300px; font-size: 12px; border: 1px solid #e6dfc6; } .ui-title{ font-size: inherit; color: #737063; margin: 0; padding: 1em 1.2em; background: #f7f1d5; } .ui-list{ list-style: none; margin: 0;...

[demo](https://codepen.io/xboxyan/pen/LYYzBqM) ```html ``` ```css .img-list { width: 420px; height: 420px; display: grid; grid-gap: 10px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); border: 10px solid #eee; padding: 10px; } .img-thumb { width:...

如果使用原生的表单提交可以像下面这样 如果使用ajax主动发请求可能就不需要注意那么多了 ```html 登录 忘记密码 登录 立即注册 ```

想了好久，感觉纯CSS没有比较完美的方法，然后借助了CSS Paint [demo](https://codepen.io/xboxyan/pen/rNxMZyX) ```js // tooltip.js class Tooltip { static get inputProperties() { return [ '--radius', // 圆角的幅度 ] } paint(ctx, size, properties) { const { width,height } = size;...

[demo](https://codepen.io/xboxyan/pen/gJdzoN) ```css /**...**/ .box:hover:active{ opacity:.99; transition:opacity 1s;/**通过css过渡设置延时**/ } ``` ```js var fragment = document.createDocumentFragment(); for (var i = 0; i < 20; i++) { var box = document.createElement('div'); box.className =...

感谢大佬，这里有一篇文章[https://github.com/XboxYan/notes/issues/4](https://github.com/XboxYan/notes/issues/4)，欢迎开脑洞^#^

[demo](https://codepen.io/xboxyan/pen/arpxpx)  ```html 0:01 / 0:05 ``` ```css .audio{ box-sizing: border-box; display: flex; padding: 0 10px; border-radius: 100px; align-items: center; min-width: 320px; min-height: 54px; background: rgb(241, 243, 244); color: #000000;...

[demo](https://codepen.io/xboxyan/pen/gJJxqL) ```css html,body{ height: 100%; margin: 0; } .container { display: flex; flex-direction: column; height: 100%; overflow: auto; } .content { flex: 1; } ``` 如果高度是固定的，下面兼容性更好 ```css html,body{ height: 100%;...

**1** ```js const radiolist1 = document.querySelectorAll('[type=radio]:required'); ``` **2** ```js const radiolist2 = document.querySelectorAll('[type=radio]:disabled'); ``` **3** ```js const radiolist3 = document.querySelectorAll('[type=radio]:checked'); ``` **4** ```js const btn = document.querySelector('#removeDisabled'); btn.addEventListener('click',()=>{ [...radiolist2].forEach(el=>{ const...

赶了个早。 [demo](https://codepen.io/xboxyan/pen/wZJgbO) ```html slider1 slider2 ``` ```css /**借助之前的css-tips**/ .slider-thumb[data-title]:before{ counter-reset: value var(--percent); content: counter(value); } html:hover .slider-thumb[data-title]:active:before, html:hover .slider-thumb[data-title]:active:after, .slider:focus .slider-thumb[data-title]:before, .slider:focus .slider-thumb[data-title]:after { visibility: visible; transform: translate(-50%, -10px); opacity:...