“CSS相关”目录存档

好诶,select下拉框元素支持样式完全自定义啦!

2025年07月4日,星期五

下拉框样式完全自定义封面图,头图

太不容易了,二十年了,select下拉框元素终于支持完全自定义了,appearance属性,popover交互,CSS锚点定位,N个伪元素四者结合。

阅读全文…

CSS小图标剪裁终极解决方案clip-path shape()函数

2025年06月30日,星期一

clip-path shape函数封面图

牛逼了,Chrome和Safari都支持clip-path shape()函数了,这个函数可谓是图形剪裁终极方案,没有path函数的缺点,以后一定会被广泛使用。

阅读全文…

text-wrap进化:支持两子属性和pretty stable新值

2025年06月18日,星期三

text-wrap封面图

CSS text-wrap属性再次进化,新增了两个属性值pretty和stable,新增了两个子属性text-wrap-mode和text-wrap-style,有兴趣的可以花两分钟快速了解下其作用。

阅读全文…

CSS ::scroll-button ::scroll-marker伪元素又是干嘛用的?

2025年06月13日,星期五

scroll snap 按钮自定义封面图

CSS越来越强了,Scroll Snap交互又新增了按钮和切换按钮的生成与自定义,类似Carousel ,Slider这类经典交互纯CSS就能完全驾驭了。

阅读全文…

震惊,有生之年居然看到CSS attr()全属性支持

2025年05月28日,星期三

css attr全属性支持

没想到有生之年可以看到足以颠覆现有开发模式和习惯,吊炸天的attr()函数被全CSS属性支持,属性选择器要雄起了。

阅读全文…

CSS animation-composition可以让动画效果累加

2025年05月12日,星期一

封面占位图

早在两年前,现代浏览器就支持通过CSS animation-composition属性设置动画@keyframes里面的语句渲染是替换还是累加了,再也不用担心transform冲突了。

阅读全文…

告别transform,是时候直接使用scale, rotate属性啦

2025年04月29日,星期二

封面占位图

你还在使用transform属性实现变换效果吗?大人,时代变了,试试直接使用scale, rotate, translate属性吧,谁用谁喜欢。

阅读全文…

一种更好的文字隐藏的方法-::first-line伪元素

2025年03月17日,星期一

first-line封面占位图

东西学太多,居然忘记了::first-line伪元素可以在不改变元素color上下文的情况下变色,可谓铁树开花焕发第二春。

阅读全文…

CSS @supports规则又新增font-tech,font-format判断

2025年03月9日,星期日

封面占位图

CSS @supports规则新增两个特性判断,分别是font-tech()和font-format()函数,都来看看是什么作用吧~

阅读全文…

终于等到了,CSS offset-path全浏览器全支持

2025年03月5日,星期三

封面占位图 offset-path

好消息,CSS路径动画属性offset-path目前所有现代浏览器都支持了,包括基本形状函数,Web端动效又添一利器。

阅读全文…