学习一些好的实用的CSStips，可以帮助我们提高工作效率。因此，在今天的文章中，我将与您分享一些很棒的CSS提示和技巧，希望对您有用。好的，让我们现在开始吧。1.CSS:in-range和:out-of-range伪类这些伪类用于在指定范围内/外设置输入样式。(a):in-range如果输入元素的当前值在min和max属性的范围之间，则该输入元素在范围内。这个伪类可以很容易地确定一个字段的当前值是否可以接受。(b):out-of-range如果输入元素的当前值超出min和max属性的范围，则输入元素超出范围。如果字段值超出其范围，它将为用户提供视觉指示。CSS代码：/*范围内*/input:in-range{background-color:rgba(0,255,0,0.25);}/*超出范围*/input:out-of-range{background-颜色：rgba(255,0,0,0.25);}输出：你应该知道这些伪类只适用于范围限制的元素。如果没有边界，则元素不能在边界内或边界外。2.grayscale()函数可以使用100%的值将图像从彩色转换为黑白。当将该值设置为0%时，您的图像将保持不变。值为100%时，您的图像将转换为黑白，这意味着照片中将没有颜色。您还可以使用0到100%之间的值来创建各种效果。CSS代码：.grayscale-image{filter:grayscale(100%);}输出：3.玻璃效果用几行代码将玻璃效果添加到您的下一个项目中。是的，这真的很容易，玻璃效果很漂亮，为您的设计增添优雅。Glass.CSS是最流行的玻璃形态生成器，您可以在其中免费为您的项目创建CSS玻璃效果。您需要做的就是根据需要调整一些设置，然后将CSS代码复制粘贴到您的项目中。CSS代码：.glass-effect{-webkit-backdrop-filter:blur(6.2px);backdrop-filter:blur(6.2px);background:rgba(255,255,255,0.4);border-radius:16px;border:1pxsolidrgba(255,255,255,0.24);}输出：4.使用下面的CSS代码对文本进行样式化每个人都应该知道的一些非常基本的文本样式化效果。但是，还有许多其他高级选项可用。CSS代码：p{font-family:Helvetica,Arial,sans-serif;font-size:5rem;text-transform:capitalize;text-shadow:2px2px2pxpink,1px1px2pxpink;text-align:center;font-weight:normal;line-height:1.6;letter-spacing:2px;}5.CSSclamp()函数CSSclamp()函数将一个值限制在两个上限和下限之间的范围内。必须有一个首选值、一个最小值和一个最大值。当字体大小因视口而异时，Clamp()会派上用场。CSS代码：p{font-size:clamp(1.8rem,2.5vw,2.8rem);}6.使div居中对于开发者来说，最重要的任务就是让div居中。还有许多其他选项可以使div居中。在此示例中，我们使用CSSflexbox将div水平和垂直居中。CSS代码：div{display:flex;证明内容：居中；align-items:center;}7.渐变CSS线性渐变要创建渐变CSS线性渐变，只需使用下面的CSS代码即可。CSS代码：div{background:linear-gradient(35deg,#CCFFFF,#FFCCCC,rgb(204,204,255));border-radius:20px;width:70%;height:400px;margin:50pxauto;}输出：8.CSS摇动效果这种“摇动”动画效果会在用户输入无效内容时摇动输入字段。它简单而优雅。例如，如果用户在文本字段中输入数字而不是字母，输入字段会抖动。HTML代码：CSS代码：input:invalid{animation:shake0.2sease-in-out0s2;box-shadow:000.4emred;}@keyframesshake{0%{margin-left:0rem;}25%{左边距：0.5rem；}75%{左边距：-0.5rem；}100%{左边距：0rem；}}输出：9.文本溢出您可以使用此属性截断溢出的文本，您可以使用省略号(...)或自定义字符串来裁剪和显示它。CSS代码：.text{white-space:nowrap;溢出：隐藏；文本溢出：剪辑；宽度：200px；}div.text{空白：nowrap;宽度：200px；溢出：隐藏；text-overflow:ellipsis;border:1pxsolid#000000;}div.text:hover{overflow:visible;}10.'column-count'属性它指定一个元素应该被分成多少列。CSScode:p{column-count:2;}Output:11.CSSanimation动画逐渐改变元素的样式，只能在第一次指定关键帧时使用，关键帧描述动画元素如何出现在动画序列的特定点观点。CSS代码：div{width:200px;height:200px;background-color:blue;animation-name:square;animation-duration:8s;}@keyframessquare{from{background-color:blue;}to{background-color:black;}}12.阴影效果使用CSS，您可以为文本和元素添加效果，将属性定义为text-shadow和box-shadow。使用text-shadow为文本添加阴影，使用box-shadow为元素添加阴影。(i)text-shadow：它给文本一个阴影。h1{color:blue;text-shadow:2px2px4px#000000;}output:(ii)box-shadow:用于给元素一个阴影效果。下例中实际的div是紫色的，box-shadow是天蓝色的，距离右边和底部10个像素。div{width:200px;height:200px;padding:15px;background-color:purple;box-shadow:10px10pxskyblue;}Output:13.CSSclips使用clip-path属性，可以只显示元素的一部分,并隐藏其余部分。CSS代码：.bg{高度：100%；宽度：100%；背景色：rgba(199,62,133,0.9)；剪辑路径：多边形（100%0、100%0、100%51%、0100%、090%、052%、051%）；position:absolute;}Output:Clippy-CSSclip-pathmaker是一种将元素裁剪为基本形状（圆形、椭圆形、多边形或插图）或SVG源以在CSS中快速轻松地创建复杂形状的方法。14.CSSbackground-blend-mode属性这个属性描述了背景颜色和图像（或两个图像）应该如何混合。每个背景图像对应的混合模式列表构成值，混合模式指定背景层如何混合（颜色或图像）。您可以使用background-blend-mode属性制作令人惊叹的背景。CSS代码：div{宽度：600px;高度：400px；background-repeat：不重复，重复；背景位置：中心；背景图片：url("flower.png"),url("background-image.png");background-blend-mode:color;}输出：还有一些其他选项可用，如果您想了解更多关于此属性的信息，请访问W3Schools：https://www.w3schools.com/cssref/pr_background-blend-mode.php看见了。写在最后的是今天分享给大家的关于CSS的14个实用技巧。我希望你能从他们身上学到新东西。如果觉得有用，记得点赞，关注我，分享这篇文章给你的开发者朋友，说不定能帮到他。最后，感谢阅读，祝编程愉快！
