51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

CSS3

基于 SCSS mixin 的 flex gap polyfill

基于 SCSS mixin 的 flex gap polyfill

厉飞雨 阅读(7) 评论(0) 赞(0)

一直以来,习惯在 flex 布局中使用 `gap` 这个属性设置间距,一直以来也都是在最新的 Chrome 上调试,所以从来没有想在 flex gap 在其他浏览器上存在兼容性问题。最近看了一下文档才反应过来,`gap` 原来只是 grid 布局的属性,虽然近些年来[主流浏览器都已经支持了](https://caniuse.com/flexbox-gap),但是一些使用人数不少...

全新的CSS相对颜色语法-使用from和calc()

全新的CSS相对颜色语法-使用from和calc()

厉飞雨 阅读(7) 评论(0) 赞(0)

<br /> ![月亮猫 相对颜色 占位封面图](http://static.51tbox.com/static/2024-12-12/col/9e7f22e50d10c2492c7a432c50a005d0/daafaf3000194d43829aa398cb272b53.png.jpg) 无论是`rgb()`颜色函数,还是`hsl()`颜色函数,现在还支持一...

CSS/JS备忘录

CSS/JS备忘录

厉飞雨 阅读(8) 评论(0) 赞(0)

CSS备忘录 {#CSS备忘录} ================ 元素水平和垂直居中 {#元素水平和垂直居中} ---------------------- 水平居中 |-----------------------|-----------------------------------------------------------------------------...

css实现连贯圆角盒子

css实现连贯圆角盒子

厉飞雨 阅读(9) 评论(0) 赞(0)

结构大概是这样的,大盒子左下角添加一个不透明多行描述,且盒子为圆角,上下盒子宽度不一致,盒子之间需要有圆弧衔接: ![](http://static.51tbox.com/static/2024-12-12/col/38bebf8c631511063f5f2f02ec4b8b9a/49761d6954694351b5bd9c0cfb96626f.webp.jpg) DOM...

使用css给网站添加一个背景

使用css给网站添加一个背景

厉飞雨 阅读(7) 评论(0) 赞(0)

最近有空给网站除草了,在这里也做了一些小优化,添加网站背景图片看起来不这么单调。 简单记录折腾日志。 ### 添加渐变背景 {#添加渐变背景} |---------------------------------------|--------------------------------------------------------------------------...

CSS好用的color-mix颜色函数也可以使用啦

CSS好用的color-mix颜色函数也可以使用啦

厉飞雨 阅读(16) 评论(0) 赞(0)

<br /> ![封面占位图 麋鹿](http://static.51tbox.com/static/2024-12-11/col/b3e28084ef575db77ab44a58a06dbe8a/03354c37fb0f43748db42c3a97918694.jpeg.jpg) ### 一、突然发现,浏览器全支持啦 `color-mix()`颜色函数去年年...

关于《CSS新世界》这本书

关于《CSS新世界》这本书

厉飞雨 阅读(18) 评论(0) 赞(0)

<br /> ![CSS新世界](http://static.51tbox.com/static/2024-12-11/col/1db5e31d17e1aaa74f0d6fe8e9b5772e/c14d80f0c2bd40f9ba2e3294873c7c0c.jpg.jpg) ### 一、视频版出炉了 花了差不多一整天时间把这个视频盘出来了。 <br ...

CSS Grid布局中的subgrid的适用场景

CSS Grid布局中的subgrid的适用场景

厉飞雨 阅读(15) 评论(0) 赞(0)

<br /> ![subgrid封面图](http://static.51tbox.com/static/2024-12-11/col/164995ed43cebca98134934cbde0178d/b6b394f959ae4bd38a12def5b55cb47f.jpg.jpg) ### 一、subgrid若干常识性知识 subgrid表示子网格,这个东西...

这啥?CSS calc-size和interpolate-size,真学不动了

这啥?CSS calc-size和interpolate-size,真学不动了

厉飞雨 阅读(12) 评论(0) 赞(0)

<br /> ![水果动画封面占位图](http://static.51tbox.com/static/2024-12-11/col/3071477ef5086fa35f3cbf9213be2b83/090191d8b7104901aa0a476d7e23774e.jpg.jpg) 就算每周学习一个前端新特性,我发现我都来不及学习。 都没有时间钓鱼了,苦啊。 ...