CSS 主要用于设置网页的视觉样式，包括布局、颜色、字体和其他设计细节。它使得网页设计与内容分离，从而提高了网页的可维护性和可重用性。
🌞 今天我将分享一些有用的 CSS 小技巧，后续不断完善，灵感不息，创作不止。
firlter家族
filter 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染
图片置灰
filter: grayscale(100%);
滤镜阴影
filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
大多数人都知道box-shadow是设置盒子阴影，但你知道 filter: drop-shadow与box-shadow的区别吗？
举个例子：
不难看出区别显而易见，但值的注意的是 filter: drop-shadow只针对一张无背景的图片。
图片模糊化
//数值越高越模糊
filter: blur(3px);
图片亮度调整
filter: brightness(1);
brightness() CSS函数将线性乘数应用于输入图像，使其看起来更亮或更暗。
加上属相后的效果：
文本省略
单行文本
<body>
<div class="box">
人总是在遭遇一次重创之后，才会幡然醒悟，重新认识自己的坚强和隐忍。所以，无论你正在遭遇什么磨难，都不要一味抱怨上苍不公平，甚至从此一蹶不振。人生没有过不去的坎，只有过不去的人。
div>
body>
多行文本
<body>
<div class="box">
人总是在遭遇一次重创之后，才会幡然醒悟，重新认识自己的坚强和隐忍。所以，无论你正在遭遇什么磨难，都不要一味抱怨上苍不公平，甚至从此一蹶不振。人生没有过不去的坎，只有过不去的人。
div>
body>
渐变
linear-gradient
linear-gradient() 创建一个由两种或多种颜色沿一条直线进行线性过渡的图像。
linear-gradient(to right, #ff9a62, var(--main--bg));
radial-gradient()
radial-gradient() 创建一个图像，该图像由从原点辐射的两种或多种颜色之间的渐进过渡组成，其形状可以是圆形或椭圆形。
background: radial-gradient(rgb(243 152 73) 23%, #000000 75%);
mask
mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。
Case 1
先看图
如果你想做一个图片的轮播切换效果，就会出现上图所示，比较生硬。但是加上下面的mask效果，边缘有一层遮罩效果，体验就会好许多
mask: linear-gradient(
90deg,
transparent,
black 10%,
black 90%,
transparent
);
mask设置transparent的部分，图片会变得透明
Case 2
两张图片的一个好看的展示效果！
<body>
<div class="box">
<img src="./img/pic1.png" alt="">
<img src="./img/pic2.png" alt="">
div>
body>
两张图片重叠使用mask可达到分割渐变的效果。
其他
background-blend-mode
//以下三个css属性结合，可以达到背景与背景颜色重合的效果
background: url(../../assets/img/user_bg.png) no-repeat 50% 100%;
background-blend-mode: overlay;
background-color: rgba(255, 255, 255,0.1);
overlay 模式将背景图像和背景颜色以混合模式的方式结合起来，增强对比度，同时保持图像的明亮度。这种模式通常用于增强图像的视觉效果或与背景颜色进行对比。
让文字发光
text-shadow: 0px 0px 5px rgba(255, 255, 255)
毛玻璃
backdrop-filter: blur(2px);
backdrop-filter 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
<body>
<div class="box">
<div class="text">
css毛玻璃
div>
div>
body>
css小案例
图片循环轮播
如下sass代码
<div class="swiperContent">
<div class="picImg">
<img src="./img/pic1.jpg" alt="">
<img src="./img/pic2.png" alt="">
<img src="./img/pic3.png" alt="">
<img src="./img/pic4.jpg" alt="">
<img src="./img/pic5.jpg" alt="">
<img src="./img/pic6.png" alt="">
<img src="./img/pic7.jpg" alt="">
<img src="./img/pic8.jpg" alt="">
<img src="./img/pic1.jpg" alt="">
<img src="./img/pic2.png" alt="">
<img src="./img/pic3.png" alt="">
<img src="./img/pic4.jpg" alt="">
<img src="./img/pic5.jpg" alt="">
<img src="./img/pic6.png" alt="">
<img src="./img/pic7.jpg" alt="">
<img src="./img/pic8.jpg" alt="">
div>
div>
扫光
容器扫光
如下sass代码
<div class="tips">热门商品div>
文字扫光
<div class="box">
<span class="tip">文字扫光效果span>
div>
写在最后
🙉 以上就是一些开发中可能会用到的css小技巧，如果有机会我还会和大家分享更多有趣且实用小技巧！！！
1、本站所有资源均从互联网上收集整理而来，仅供学习交流之用，因此不包含技术服务请大家谅解！
2、本站不提供任何实质性的付费和支付资源，所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用！
3、本站所有资源仅用于学习及研究使用，您必须在下载后的24小时内删除所下载资源，切勿用于商业用途，否则由此引发的法律纠纷及连带责任本站和发布者概不承担！
4、本站站内提供的所有可下载资源，本站保证未做任何负面改动（不包含修复bug和完善功能等正面优化或二次开发），但本站不保证资源的准确性、安全性和完整性，用户下载后自行斟酌，我们以交流学习为目的，并不是所有的源码都100%无错或无bug！如有链接无法下载、失效或广告，请联系客服处理！
5、本站资源除标明原创外均来自网络整理，版权归原作者或本站特约原创作者所有，如侵犯到您的合法权益，请立即告知本站，本站将及时予与删除并致以最深的歉意！
6、如果您也有好的资源或教程，您可以投稿发布，成功分享后有站币奖励和额外收入！
7、如果您喜欢该资源，请支持官方正版资源，以得到更好的正版服务！
8、请您认真阅读上述内容，注册本站用户或下载本站资源即您同意上述内容！
原文链接：https://www.shuli.cc/?p=21443，转载请注明出处。
评论0