细数那些惊艳一时的CSS属性

　　前言
　　随着前端的不断发展，更多新的CSS属性不断加入提案，本文列举7个不常用但很有用且你见过也可能没见过的CSS属性，带大家领略CSS之美。1。position：sticky
　　不知道大家平时业务开发中有没有碰到像上图一样的吸顶的需求：标题在滚动的时候，会一直贴着最顶上。
　　这种场景实际上很多：比如表格的标题栏、网站的导航栏、手机通讯录的人名首字母标题等等。如果让大家自己动手做的话，是不是会用js结合css来实现呢？以前确实是这样的，直到后来position属性新增了一个属性值sticky，前端程序员才迎来了小春天。css部分。container｛backgroundcolor：oldlace；height：200px；width：140px；overflow：auto；｝。containerp｛height：20px；backgroundcolor：aqua；border：1pxsolid；｝。container。header｛position：sticky；top：0；backgroundcolor：rgb（187，153，153）；｝html部分Header123
　　就这么简单？对，就这么简单，但是小伙伴们使用的时候要注意兼容性。2。：empty选择器
　　平时开发的时候数据都是通过请求接口获取的，也会存在接口没有数据的情况。这个时候正常的做法是给用户一个提示，让用户知道当前不是出bug了，而是确实没有数据。
　　一般的做法是我们人为的判断当前数据返回列表的长度是否为0，如果为0则显示一个暂无数据给用户，反之则隐藏该提示。写过Vue的小伙伴是不是经常这么做：templatevifdatas。lengthtemplatetemplatevelse暂无数据template
　　但是有了：empty这个选择器后，你大可以把这个活交给CSS来干。。container｛height：400px；width：600px；backgroundcolor：antiquewhite；display：flex；justifycontent：center；alignitems：center；｝。container：empty：：after｛content：暂无数据；｝
　　通过：empty选中内容为空的容器，然后通过伪元素为空容器添加提示。是不是方便很多呢？3。gap
　　小伙伴们日常开发中，都有用过padding和margin吧，margin一般用做边距，让两个元素隔开一点距离，但是对于一些场景下，我们很难通过计算得到一个除的尽的值，比如100px我要让3个元素等分，且每个元素隔开10px，这就很尴尬了。
　　没关系！我们可以用gap属性，gap属性它适用于Grid布局、Flex布局以及多列布局，并不一定只是Grid布局中可以使用。
　　比如我们要让每个元素之间隔开20px，那么使用gap我们可以这样：display：flexgrid；gap：20px；
　　是不是很简单呢？4。backgroundclip：text
　　这个属性可能小伙伴们用的不多，有什么用呢？简单来说就是可以做一个带背景的文字效果：
　　图1图2图3。是不是很惊艳呢？大家平时backgroundclip是不是都用来做一些裁切效果？in知道它还有个属性值是text吗？backgroundclip：text用来做带背景的文字效果，相信大家平时浏览一些网站的时候都会看到类似的实现，实际上通过CSS我们也能做到这种效果，可不要傻傻的以为都是用制图工具做的。5。userselect
　　很多人不知道这个属性是什么意思。大家看看下图：
　　网页和APP有个不同点是，网页上的字是可以通过光标选中的，而APP的不行。
　　有的小伙伴可能会疑惑：那我网页上也用不着这个属性啊？
　　非也非也，我们知道现在很多新的技术产生，可以在APP上嵌套webview或者是网页，比如Electron做的桌面端应用，大家没见过哪个桌面端应用是可以光标选中的吧？
　　而userselect属性可以禁用光标选中，让网页看着和移动端一样。6。：invalid伪类
　　：invalid表示任意内容未通过验证的input或其他form元素。什么意思呢？举个例子。
　　这是一个表单。
　　我们的需求是让input当值有效时，元素颜色为绿色，无效时为红色。input：invalid｛backgroundcolor：ffdddd；｝form：invalid｛border：5pxsolidffdddd；｝input：valid｛backgroundcolor：ddffdd；｝form：valid｛border：5pxsolidddffdd；｝input：required｛bordercolor：800000；borderwidth：3px；｝input：required：invalid｛bordercolor：C00000；｝
　　有了：invalid属性后，我们就可以不用JS也能实现校验提示的效果了。7。：focuswithin伪类
　　：focuswithin表示一个元素获得焦点，或该元素的后代元素获得焦点，就会匹配上。啥意思呢？
　　话不多说，先看图：
　　CSSform｛border：1pxsolid；width：400px；height：300px；display：flex；justifycontent：center；alignitems：center；｝form：focuswithin｛boxshadow：0px4px4pxrgba（0，0，0，0。3）；backgroundcolor：beige；｝HTML
　　可以根据子元素的状态来改变父元素的样式，方便的很。也能玩出不少花样来。
　　有的小伙伴看完后可能会想：嗷，也没啥的啊，这有啥花样？8。mixblendmode：difference
　　mixblendmode：difference属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。其中，difference表示差值。
　　如果给你这张图，你会怎么去绘制？是不是很麻烦。
　　但是如果用mixblendmode：difference这个属性，就可以很容易的实现。。mode｛display：flex；justifycontent：center；alignitems：center；mixblendmode：difference；｝。dark｛position：relative；left：6px；height：24px；width：24px；backgroundcolor：grey；borderradius：50；｝。light｛mixblendmode：difference；position：relative；left：6px；height：16px；width：16px；borderradius：50；border：4pxsolidgrey；｝结束语
　　本文就到此结束了，希望大家共同努力，早日拿下CSS。
　　如果大家觉得所有收获，欢迎一键三连。