< 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系统使用安卓软件推荐,跨... 你有没有发现,虽然你的手机是iOS系统,但有时候安卓软件也让人心动不已?别急,今天就来给你支个招,让...
小米是ios系统还是安卓系统,... 你有没有想过,小米手机到底是用的是苹果的iOS系统还是安卓系统呢?这个问题,估计不少手机控都好奇过吧...
安卓系统的音频解码软件,音质之... 你有没有发现,手机里的音乐听起来总是不那么完美?有时候,高音刺耳,低音又不够深沉,这可真是让人头疼。...
服装商城安卓系统报告,安卓系统... 你有没有发现,最近手机上那些服装商城APP真是越来越火了?不信你看看,每天打开手机,各种新款衣服、打...
kindle可以装安卓系统 你有没有想过,你的Kindle电子书阅读器竟然也能装上安卓系统?是的,你没听错,那个一直以简洁著称的...
安卓如何刷成苹果系统,揭秘如何... 你有没有想过,把你的安卓手机刷成苹果系统,是不是就像给手机换了个新灵魂呢?想象那熟悉的苹果界面,流畅...
蜻蜓刷机安卓系统,解锁安卓系统... 你有没有想过,你的安卓手机是不是也该来点新鲜感呢?没错,就是那种让你眼前一亮,仿佛重生的感觉。今天,...
安卓系统版平板电脑,系统版本与... 你有没有发现,最近平板电脑市场又热闹起来了呢?尤其是安卓系统版的平板电脑,简直成了大家的新宠。今天,...
安卓系统查找我的位置 你有没有遇到过这样的情况:手机里装了各种APP,有时候突然想找找某个地方,却发现手机里竟然没有“查找...
新版安卓系统云递安闪退,新版安... 最近你的安卓手机是不是也遇到了一个小麻烦?那就是新版安卓系统里的那个“云递安”功能,它突然间开始闪退...
安卓系统能不能回溯,探索回溯技... 你有没有想过,你的安卓手机里那些曾经的信息,是不是可以像时间机器一样,让你回到过去,看看那些珍贵的回...
安卓系统的记事本,便捷记录与创... 你有没有发现,手机里的安卓系统记事本,这个小家伙竟然藏着大大的秘密呢!它就像你的私人小秘书,随时随地...
安卓小网站推荐苹果系统,探索苹... 你知道吗?在这个科技飞速发展的时代,手机已经成为了我们生活中不可或缺的一部分。无论是安卓还是苹果,它...
安卓取消系统安全警告,操作指南... 你知道吗?最近安卓系统来了一次小小的“大动作”,那就是取消了那些烦人的系统安全警告。这可真是让人又爱...
安卓系统小孩益智游戏,专为安卓... 你有没有发现,现在的小朋友们对手机和电脑的依赖程度越来越高呢?这不,最近我就在网上看到了一些关于安卓...
苹果6如何变安卓系统,揭秘如何... 你手上的苹果6是不是已经有点儿“老态龙钟”了?别急,别急,今天就来教你怎么给它换上全新的安卓系统,让...
安卓系统怎么切换桌面,轻松切换... 你有没有发现,手机里的安卓系统就像是个万能的小助手,各种功能层出不穷。不过,有时候我们可能觉得默认的...