< CSS小技巧:那些不常用,却很惊艳的CSS属性 >
创始人
2024-06-03 14:33:25
0

在这里插入图片描述

文章目录

  • 👉 前言
  • 👉 一. background-clip: text - 限制背景显示(裁剪)
  • 👉 二. user-select - 控制用户能否选中文本
  • 👉 三. :focus-within 伪类
  • 👉 四. gap - 网格 / 弹性布局间隔设置
  • 👉 五. :invalid 伪类
  • 👉 六. :empty 选择器
  • 参考文献
  • 往期内容 💨


👉 前言

随着技术的迭代,前端需求也在越来越复杂和 “花哨” 。 为了适应复杂的需求,CSS(层叠样式表)也在不断的迭代更新, 越来越多的 CSS 属性不断加入提案。

本文列举 6 个不常用但很有用且你见过也可能没见过的 CSS 属性,带大家领略 CSS 之美。

👉 一. background-clip: text - 限制背景显示(裁剪)

这个属性可能小伙伴们用的不多,有什么用呢?简单来说就是可以做一个带背景的艺术文字效果

效果图







background-clip !

background-clip !

👉 background-clip详细教程文档(点击跳转)

👉 二. user-select - 控制用户能否选中文本

在这里插入图片描述

众所周知,网页和 APP 有个不同点是,网页上的字是可以通过光标选中的,而 APP 的不行。

有的小伙伴可能会疑惑:那我网页上也用不着这个属性啊?
非也非也,我们知道现在很多新的技术产生,可以在 APP 上嵌套 webview 或者是网页,比如 Electron 做的 桌面端应用 ,大家没见过哪个桌面端应用是可以光标选中的吧?

user-select 属性可以 禁用光标选中 ,让网页看着和移动端一样。当然,我们也可以在网页上,机密信息对应的标签加上这个属性,阻止用户选中这段文字(可以加上提示),以达到警示效果!

👉 user-select详细教程文档(点击跳转)

👉 三. :focus-within 伪类

:focus-within 表示一个元素获得焦点,或者,当该元素的后代元素获得焦点,就会匹配上提前预设的样式内容。换句话说,当元素自身或者它的某个后代匹配 :focus 伪类时,会匹配上:focus-within 伪类内的样式。

所以,在使用这个伪类时,需要注意:使用的元素需要能触发:focus伪类的标签,才能合理触发该伪类的样式。例如: input。

// CSS
// HTML

优秀示例: 纯css实现:仿掘金账户密码登录时,小熊猫捂眼动作切换的小彩蛋

👉 :focus-within 伪类详细教程文档(点击跳转)

👉 四. gap - 网格 / 弹性布局间隔设置

小伙伴们日常开发中,都有用过 paddingmargin 吧,margin 一般用做边距,让两个元素隔开一点距离,但是对于一些场景下,我们很难通过计算得到一个除的尽的值,比如 100px 我要让 3 个元素等分,且每个元素隔开 10px,这就很尴尬了。

没关系!我们可以用 gap 属性,gap 属性它适用于 Grid / Flex 布局以及多列布局,并不一定只是 Grid 布局中可以使用。

比如我们要让每个元素之间隔开 20px, 那么使用 gap 我们可以这样:

display: flex | grid;
gap: 20px;

👉 五. :invalid 伪类

:invalid 表示任意内容未通过验证的 input 或其他 form 元素。什么意思呢?举个例子。



需求是让 input 当值有效时,元素颜色为绿色,无效时为红色。

input:invalid {background-color: #ffdddd;
}form:invalid {border: 5px solid #ffdddd;
}input:valid {background-color: #ddffdd;
}form:valid {border: 5px solid #ddffdd;
}input:required {border-color: #800000;border-width: 3px;
}input:required:invalid {border-color: #C00000;
}

👉 :invalid 伪类详细教程文档

👉 六. :empty 选择器

在这里插入图片描述
平时开发的时候数据都是通过请求接口获取的,也会存在接口没有数据的情况。这个时候正常的做法是给用户一个提示,让用户知道当前不是出 bug 了,而是确实没有数据。

一般的做法是我们人为的判断当前数据返回列表的长度是否为 0,如果为 0 则显示一个 “暂无数据” 给用户,反之则隐藏该提示。

通过Vue指令,是可以直接通逻辑判定:

但是有了 :empty 这个选择器后,你大可以把这个活交给 CSS 来干。

.container {height: 400px;width: 600px;background-color: antiquewhite;display: flex;justify-content: center;align-items: center;
}
.container:empty::after {content: "暂无数据";
}

通过 :empty 选中内容为空的容器,然后通过伪元素为空容器添加提示。不仅方便一点,也能稍微提高性能,在数据频繁刷新的情况下!

参考文献

https://developer.mozilla.org/zh-CN/

往期内容 💨

🔥 < JavaScript技术分享: 大文件切片上传 及 断点续传思路 >

🔥 < 每日技巧: JavaScript代码优化 >

🔥 < 每日知识点:关于Javascript 精进小妙招 ( Js技巧 ) >

🔥 <Javascript技巧: Javascript 是个难泡的妞,学点技巧征服 “ 她 ” >

相关内容

热门资讯

编程安卓系统和鸿蒙主题,跨平台... 你有没有想过,手机的世界里,除了苹果的iOS和安卓的操作系统,还有个神秘的鸿蒙系统?今天,咱们就来聊...
哪个安卓机系统好用,探索安卓系... 你有没有想过,手机里的安卓系统就像是个大厨,不同的系统就像不同的烹饪手法,有的让你吃得津津有味,有的...
安卓如何控制苹果系统,从安卓到... 你知道吗?在这个科技飞速发展的时代,安卓和苹果两大操作系统之间的较量从未停歇。虽然它们各自有着忠实的...
安卓原生系统文件夹,安卓原生系... 你有没有发现,每次打开安卓手机,里面那些文件夹就像是一个个神秘的宝箱,里面藏着各种各样的宝贝?今天,...
基于安卓系统的游戏开发,从入门... 你有没有想过,为什么安卓手机上的游戏总是那么吸引人?是不是因为它们就像是你身边的好朋友,随时随地都能...
安卓系统怎样装驱动精灵,安卓系... 你那安卓设备是不是突然间有点儿不给力了?别急,今天就来手把手教你如何给安卓系统装上驱动精灵,让你的设...
如何本地安装安卓系统包,详细步... 你有没有想过,把安卓系统装在你的电脑上,是不是就像给电脑穿上了时尚的新衣?想象你可以在电脑上直接玩手...
安卓12卡刷系统教程,体验全新... 你有没有发现,你的安卓手机最近有点儿不给力了?运行速度慢得像蜗牛,是不是也想给它来个“换血大法”,让...
安卓系统无法打开swf文件,安... 最近是不是发现你的安卓手机有点儿不给力?打开SWF文件时,是不是总是出现“无法打开”的尴尬局面?别急...
鸿蒙系统依赖于安卓系统吗,独立... 你有没有想过,我们手机里的那个鸿蒙系统,它是不是真的完全独立于安卓系统呢?这个问题,估计不少手机控都...
适合安卓系统的图片软件,精选图... 手机里堆满了各种美美的照片,是不是觉得找起来有点头疼呢?别急,今天就来给你安利几款超级适合安卓系统的...
阴阳师安卓系统典藏,探寻阴阳师... 亲爱的阴阳师们,你是否在安卓系统上玩得如痴如醉,对那些精美的典藏式神们垂涎欲滴?今天,就让我带你深入...
安卓系统有碎片化缺点,系统优化... 你知道吗?在手机江湖里,安卓系统可是个响当当的大侠。它那开放、自由的个性,让无数手机厂商和开发者都为...
安卓4系统手机微信,功能解析与... 你有没有发现,现在市面上还有很多安卓4系统的手机在使用呢?尤其是那些喜欢微信的朋友们,这款手机简直就...
鸿蒙系统是安卓的盗版,从安卓“... 你知道吗?最近在科技圈里,关于鸿蒙系统的讨论可是热闹非凡呢!有人说是安卓的盗版,有人则认为这是华为的...
安卓系统怎么剪辑音乐,轻松打造... 你是不是也和我一样,手机里存了超多好听的歌,但是有时候想给它们来个变身,变成一段专属的旋律呢?别急,...
怎么把安卓手机系统变为pc系统... 你有没有想过,把你的安卓手机变成一台PC呢?听起来是不是有点酷炫?想象你可以在手机上玩电脑游戏,或者...
手机怎么装安卓11系统,手机安... 你有没有想过,让你的手机也来个“青春焕发”,升级一下系统呢?没错,就是安卓11系统!这个新系统不仅带...
安卓系统如何拼网络,构建高效连... 你有没有想过,你的安卓手机是怎么和网络“谈恋爱”的呢?没错,就是拼网络!今天,就让我带你一探究竟,看...
安卓系统怎么看小说,轻松畅享电... 你有没有发现,手机里装了那么多应用,最离不开的竟然是那个小小的小说阅读器?没错,就是安卓系统上的小说...