五个惊艳一时的CSS属性的介绍(不常用但很有用)_F11

分享到

五个惊艳一时的CSS属性的介绍(不常用但很有用)

css 来源：互联网作者：佚名发布时间：2023-02-20 22:14:47 人浏览

摘要

随着前端的不断发展，更多新的CSS属性不断加入提案，本文列举 5 个不常用但很有用且你见过也可能没见过的CSS属性，带大家领略CSS之美。一、position: sticky 不知道大家平时业务开发中

随着前端的不断发展，更多新的 CSS 属性不断加入提案，本文列举 5 个不常用但很有用且你见过也可能没见过的 CSS 属性，带大家领略 CSS 之美。

一、position: sticky

不知道大家平时业务开发中有没有碰到这样的需求：标题在滚动的时候，会一直贴着最顶上。这种场景实际上很多：比如表格的标题栏、网站的导航栏、手机通讯录的人名首字母标题等等。如果让大家自己动手做的话，是不是会用 js 结合 css 来实现呢？以前确实是这样的，直到后来 position 属性新增了一个属性值 sticky ，前端程序员才迎来了小春天。

css 部分：

.container {

background-color: oldlace;

height: 200px;

width: 140px;

overflow: auto;

}

.container div {

height: 20px;

background-color: aqua;

border: 1px solid;

}

.container .header {

position: sticky;

top: 0;

background-color: rgb(187, 153, 153);

}

html 部分：

<div class="header">Header</div>

</div>

就这么简单？对，就这么简单，但是使用的时候要注意兼容性。

二、:empty 选择器

平时开发的时候数据都是通过请求接口获取的，也会存在接口没有数据的情况。这个时候正常的做法是给用户一个提示，让用户知道当前不是出 bug 了，而是确实没有数据。一般的做法是我们人为的判断当前数据返回列表的长度是否为 0，如果为 0 则显示一个 “暂无数据” 给用户，反之则隐藏该提示。写过 Vue 的小伙伴是不是经常这么做：

<div>

</template>

</template>

</div>

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

.container {

height: 400px;

width: 600px;

background-color: antiquewhite;

display: flex;

justify-content: center;

align-items: center;

}

.container:empty::after {

content: "暂无数据";

}

通过 :empty 选中内容为空的容器，然后通过伪元素为空容器添加提示。是不是非常方便？

三、gap

小伙伴们日常开发中，都有用过 padding 和 margin 吧，margin 一般用做边距，让两个元素隔开一点距离，但是对于一些场景下，我们很难通过计算得到一个除的尽的值，比如 100px 我要让 3 个元素等分，且每个元素隔开 10px，这就很尴尬了。
没关系！我们可以用 gap 属性，gap 属性它适用于 Grid 布局、Flex 布局以及多列布局，并不一定只是 Grid 布局中可以使用。
比如我们要让每个元素之间隔开 20px，那么使用 gap 我们可以这样：

1 2	display: flex \| grid； gap: 20px;

四、background-clip: text

这个属性可能用的不多，有什么用呢？简单来说就是可以做一个带背景的文字效果：

大家平时 background-clip 是不是都用来做一些裁切效果？你知道它还有个属性值是 text 吗？background-clip: text 用来做带背景的文字效果，相信大家平时浏览一些网站的时候都会看到类似的实现，实际上通过 CSS我们也能做到这种效果。

五、:invalid 伪类

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

<form>

<label for="url_input">Enter a URL:</label>

<br />

<label for="email_input">Enter an email address:</label>

</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;

}

您可能感兴趣的文章 :

原文链接 : https://blog.csdn.net/qq_44880095/article/details/128831652

Tag : css(235)

css动画实现节流的代码

1、节流原理如果持续触发事件，每隔一段时间只执行一次函数。意思就是针对调用频率高的函数，通过设置延时，使其在执行后间隔一段时
五个惊艳一时的CSS属性的介绍(不常用但很有用

随着前端的不断发展，更多新的CSS属性不断加入提案，本文列举 5 个不常用但很有用且你见过也可能没见过的CSS属性，带大家领略CSS之美。
基于CSS实现元素融合效果

实现效果完整源码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
纯CSS实现loading加载中效果(多种展现形式)

前言现如今网页越来越趋近于动画，相信大家平时浏览网页或多或少都能看到一些动画效果，今天我们来做一个有意思的动画效果，纯css实
html+css设计两个摆动的大灯笼

新年马上就要到了，教大家用html+css设计两个大灯笼，喜气洋洋。 html代码： html代码部分非常简单，将一个灯笼分成几部分进行设计，灯笼
CSS-@规则(At-rules)常用语法使用总结

At-rules规则是目前CSS中一种常见的语法规则，它使用一个@符号加一个关键词定义，后面跟上语法区块，如果没有则以分号结束即可。这种规
css实现简易报警灯的代码

实现效果实现思路实现的核心是一个灯罩和一个灯芯。灯罩主要是使用了border-radius圆角边框，灯芯主要是radial-gradient径向渐变。再使用动
CSS3使用双旋转实现福到了的迎春喜庆特效代码

春节快到了，因为疫情已经好久没有回老家了，今年终于可以回家过年了，我已经抑制不住自己激动的心情了。因此，我利用css3的旋转做了
三分钟学会使用css雪碧图

一. 先分析一下名字（有没有人跟我一开始一样疑惑为啥叫这名） Sprite 英文小精灵的意思，Sprite又叫小精灵图，恰好呢某绿瓶气泡水名也叫
css实现文字充电效果的代码

今年Apple推出了搭载M2芯片的新款MacBook Pro和MacBook Air，得到消息第一时间也是去Apple官网看看介绍，看看他们的产品网页，这次没有什么特别