【高级CSS属性】那些年轰动一时的5个CSS高级属性（附源码）

---

---

写在前面

其实写了这么久的前端，还是有很多东西没能实用起来，之前一直处在一个够用能实现的状态，也随着知识的积累，也慢慢的使用了一些大牛们开发出来的前沿组件，当然今天我要给大家推荐的是当时红极一时却又被多数人遗忘的5个CSS属性，用了之后确实会上瘾的，因为它确实让我们的代码更整洁更高效。

涉及知识点

CSS五个高级属性的应用技巧，CSS轰动一时的5种属性，CSS伪元素：empty的应用，gap属性的布局应用，CSS伪类 :invalid 应用，如何CSS实现输入框格式校验，文字背景图片的设置，background-clip: text的应用，如何实现表头固定其他地方滚动，position: sticky应用实现头部固定内容滚动。

---

版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。

---

1、:empty选择器

1.1 应用场景及效果

当我们从接口获取数据的时候如果没有数据的话，正常来说我们会单独显示没有数据的标签或者是给已有的标签赋文本值为‘暂无数据’，其实这样做的话也能实现效果，但是我说CSS也能实现，是不是让程序更加简单了。
在页面上我用了两个div分别设置标签内有内容和css设置内容，如下效果：

1.2 代码实现

具体代码实现如下：
Html代码

<div class="datalist">
    <div class="showdata">查无有数据</div>
    <div class="showdata1"></div>
</div>

CSS代码

.showdata,
.showdata1 {
    
    
    width: 500px;
    height: 100px;
    background-color: #fff;
    padding: 50px;
    text-align: center;
    margin: 50px auto;
    font-size: 40px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    border: 1px solid #aaa;
    color: #777;
}

.showdata1:empty::after {
    
    
    content: "暂无数据";
}

从这里不难发现我们可以通过伪元素给容器添加内容，相比来说还是比较的方便的，都不用做判断js赋值了。

2、gap属性

2.1 应用场景及效果

平时控制内外边距让多个div并列且等间隙，我们用的最多的应该是margin或者padding，但是这个设置样式有时候不好做到完全等分，比如说一个宽100px的容器里面放3个同宽的盒子一般之前我都是设置margin-left:calc(33.3% - 10px);但是因为3等分是无数个33.3333…%,因此这种设置方式是存在间隙的，所以今天我就来和大家说一下gap属性，主要适用于grid和flex布局，比如做个对比，先用calc(33% - 10px),再用gap属性设置看下效果：

不难发现，其中第一个margin最后一个div后面始终都没有填满，但是gap可以做到完全前后贴住状态。

2.2 代码实现

具体代码实现如下：
Html代码

<div class="grepDom">
    <div class="boddom">
        <div class="bbcalc">1</div>
        <div class="bbcalc">2</div>
        <div class="bbcalc">3</div>
    </div>
    <div class="boddom1">
        <div class="bbgap">1</div>
        <div class="bbgap">2</div>
        <div class="bbgap">3</div>
    </div>
</div>

CSS代码

.boddom,
.boddom1 {
    
    
    width: 600px;
    height: 80px;
    margin: 10px auto;
    background-color: #fff;
}

.bbcalc {
    
    
    width: calc(33% - 10px);
    height: 40px;
    background-color: #777;
    float: left;
    color: #fff;
    margin-left: 10px;
}

.boddom1 {
    
    
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 20px;
}

.bbgap {
    
    
    width: auto;
    height: 40px;
    background-color: #777;
}

.boddom1>div {
    
    
    border: 1px solid black;
    background-color: green;
    text-align: center;
    padding: 5px;
    color: #fff;
}

---

版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。

---

3、伪类 :invalid 应用

3.1 应用场景及效果

我们经常会遇到一个校验的问题，比如输入框里面的内容不符规范，我们可以让框变色或者背景变色，这个之前实现都是基于js来进行样式属性的设置的，但是今天我要给大家讲的是:invalid伪类的实际应用，我们先看看下面的例子吧。

从上面我们不难发现，只要输入时候是正确的其背景色才是绿色的，当两个都正确时候最外面的框也是绿色的，否则都是红色状态。

3.2 代码实现

具体实现代码如下：

Html代码

<div class="invlidDom">
    <form>
        <label for="url_input">URL地址:</label>
        <input type="url" id="url_input" />
        <br />
        <br />
        <label for="email_input">邮箱地址:</label>
        <input type="email" id="email_input" required />
    </form>
</div>

CSS代码

.invlidDom {
    
    
    width: 600px;
    padding: 30px;
    margin: 10px auto;
}

.invlidDom form {
    
    
    padding: 30px;
}

input {
    
    
    padding: 3px 5px;
    height: 30px;
    box-sizing: border-box;
}

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

4、background-clip: text属性

4.1 应用场景及效果

其实这个属性设置主要实现的功能是将文字设置背景图效果，正常我们做文字渐变色或者其他颜色是可以做到好看效果，但是要是实现更复杂的文字字体颜色可以用背景图，也就是文字的背景是一张图片，具体实现效果如下：

4.2 代码实现

Html代码

<div class="txtbg">
    <div class="txtdom">CSDN - 拄杖盲学轻声码</div>
    <div class="txtdom1">CSDN - 拄杖盲学轻声码</div>
</div>

Css代码

.txtbg {
    
    
    width: 600px;
    margin: 10px auto;

}

.txtdom,
.txtdom1 {
    
    
    width: 100%;
    text-align: center;
    height: 40px;
    padding: 20px 0;
    margin: 10px auto;
    font-size: 30px;
    color: #555;
    font-weight: bold;
    border: 1px solid #883fb9;
}

.txtdom1 {
    
    
    background: url("images/gb.png") center center no-repeat;
    background-size: 100% 100%;
    -webkit-background-clip: text;
    color: transparent;
}

切记自己要备好一张您想要的照片哟！

5、position: sticky应用

5.1 应用场景及效果

之前其实我被表格的头部固定tbody可以滚动困扰过，以前是针对thead和tbody进行设置，主要设置tbody固定高度，因此就可以滚动，但是这样设置显得很low，接触了sticky属性后，我们可以在很多固定头部场景都可以应用起来。如下所示的效果：

5.2 代码实现

其中头部Header褐红色部分是始终固定的，其他部分超出了就会有滚动条，具体实现代码如下：

Html代码

<div class="posiDom">
    <div class="container">
        <div class="header">Header（头部固定）</div>
        <div>拄杖盲学轻声码</div>
        <div>CSDN最帅黄大大</div>
        <div>解疑答惑助开发</div>
        <div>一机一码一生涯</div>
        <div>谁怕？</div>
        <div>一蓑烟雨任平生</div>
    </div>
</div>

CSS代码

.posiDom {
    
    
    width: 600px;
    margin: 10px auto;
}

.container {
    
    
    background-color: oldlace;
    height: 200px;
    width: 595px;
    line-height: 60px;
    text-align: center;
    overflow: auto;
}

.container div {
    
    
    height: 60px;
    background-color: rgba(114, 119, 119, 0.589);
    border: 1px solid;
    color: #fff;
}

.container .header {
    
    
    position: sticky;
    top: 0;
    background-color: rgb(187, 153, 153);
}

我主要是把我看到的难得使用的一些CSS属性给大家做了一个罗列与展示，希望能够让大家从中学到更多CSS样式属性相关的知识，当然如果大家有更好的样式属性和建议可以留言哈，一起互相学习互相进步！

【源码留邮箱】需要完整demo源码的评论区留下您的邮箱账号，博主看到第一时间发给您，祝您生活愉快！

---

总结

以上就是今天要讲的内容，本文主要介绍了CSS 5个高级属性的应用技巧，CSS轰动一时的5种属性，CSS伪元素：empty的应用，gap属性的布局应用，CSS伪类 :invalid 应用，如何CSS实现输入框格式校验，文字背景图片的设置，background-clip: text的应用，如何实现表头固定其他地方滚动，position: sticky应用实现头部固定内容滚动，也期待大家一起进步哈，2023年一起加油！！！

---

版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。

---