文章关键字 ‘伪元素’

CSS ::file-selector-button伪元素简介

2022年10月12日,星期三

下雨 景色 封面图 占位

妈妈再也不用担心我的input=file文件选择选择框长得太丑了!

阅读全文…

基于文字的URL锚点定位与::target-text样式设置

2022年06月12日,星期日

targer-text文字片段高亮

文字选区片段高亮又新增一名成员,可以使用 ::target-text 伪元素进行匹配,反正耽误不了几分钟,过来看看,说不定之后用得着。

阅读全文…

密码强度效果最佳实现一定是HTML meter元素

2021年11月14日,星期日

配合meter元素,纯CSS也能实现3色状态带强中弱提示的密码强度效果,有基础有深入,本文可以学到的东西挺多。

最终渐变文字效果

阅读全文…

CSS content新的替换元素规范行为解读

2021年10月8日,星期五

CSS content占位图

CSS悄然发展,已有CSS行为也跟着发生了变化,content属性就是其一,现在所有现代浏览器都支持普通HTML元素通过content属性改变元素内容,背后的原理和机制是什么呢?

阅读全文…

CSS ::marker伪元素简介

2021年02月16日,星期二

标记列表项目符号

::marker是CSS中新出的一种伪元素,用来匹配列表项中的marker box,可以改变项目符号的颜色字体等,甚至改变项目符号内容,填补了CSS以前这块的能力空白。

阅读全文…

使用::part伪元素改变Shadow DOM的CSS样式

2021年02月6日,星期六

css part伪元素马儿开心跑占位图

详细介绍CSS ::part伪元素,以及和Shadow DOM中<slot&gt一起使用的细节知识,多个demo和截图,希望可以帮到您的学习。

阅读全文…

图片加载失败后CSS样式处理最佳实践

2020年10月24日,星期六

图片加载失败最佳实践封面图

图片加载失败的默认UI是比较丑陋的,因为前端开发会使用出错图进行替换,但是这种做法会隐藏图像的内容信息,有没有什么办法在CSS样式美化同时显示图像的信息呢?本文就介绍我摸索出来的应对此场景的最佳实践技巧,希望可以对您的工作与学习带来帮助。

阅读全文…

小tips: 如何借助content属性显示CSS var变量值

2019年05月28日,星期二

CSS变量缩略图

借助CSS计数器,我们可以巧妙地实现CSS var变量值在页面中呈现的效果。这是一个所有CSS开发人员都必须要掌握的一个小技巧。

阅读全文…

CSS ::backdrop伪元素是干嘛用的?

2018年12月22日,星期六

backdrop头图

CSS ::backdrop伪元素可以控制视频,弹框或者普通全屏元素的黑色蒙层背景样式的。兼容性还很不错,实际项目中可以用一用。

阅读全文…

周知:CSS -webkit-伪元素选择器不再导致整行无效

2018年12月17日,星期一

-webkit-与伪元素

通常,如果选择器链或组中有无效的伪元素或伪类,则整个选择器列表无效。如果伪元素(但不是伪类)具有-webkit-前缀,那么对于Firefox 63+,Blink、Webkit和Gecko浏览器认为它是有效的,而不会使选择器列表无效。

阅读全文…