简单又实用的CSS小技巧！

CSS是网页设计的重要组成部分，负责网页的样式和布局，大约有上百个属性，本文分享一些有用的 CSS 小技巧，方便开发者和设计师参考，一起来看看吧~~~

firlter用法

filter(滤镜)通常用于调整图像、背景和边框的渲染。

图片置灰

filter: grayscale(100%);

滤镜阴影

filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.8));

大多数人都知道box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.8);是设置盒子阴影，但你知道 filter: drop-shadow与box-shadow的区别吗？
举个例子：

<style>
    .img1 {
        filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.8));
    }

    .img2 {
        box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.8);
    }
</style>

<body>
    <img class="img1" style="width: 200px;height: 180px; margin: 100px;" src="./img/huanbg.png">
    <img class="img2" style="width: 200px;height: 180px; margin: 100px;" src="./img/huanbg.png">
</body>

这里列举了两种情况：

不难看出区别显而易见，但值的注意的是这种情况只针对一张无背景的图片。

模糊图片

//数值越高越模糊
filter: blur(5px);

对比图：

Cursor

cursor CSS 属性设置光标的类型（如果有），在鼠标指针悬停在元素上时显示相应样式。

cursor:default//默认箭头
cursor:pointer//小手
cursor:not-allowed//禁用标志
cursor:grab//可抓取
等等

自定义光标样式，通过url可以自定义样式我查阅相关文档，发现最适合设置鼠标样式的文件为.cur和.gif但都没生效用.ico就成功了
这是网址 https://convertio.co/zh/png-cur/

//这里default是当图片没加载出来时候显示默认光标
body {
  width: 100%;
  height: 100vh;
  cursor: url("./img/bitbug_favicon.ico"),default;
}

如制作游戏网页可以这样

超出文本省略号

单行文本

overflow:hidden;/*超出部分隐藏*/
text-overflow:ellipsis;/*超出部分显示省略号*/
white-space:nowrap;/*规定段落中的文本不进行换行 */

多行文本

overflow: hidden;
display: -webkit-box;   //将对象作为弹性伸缩盒子模型显示  
-webkit-box-orient: vertical;   //设置伸缩盒对象的子元素的排列方式 
-webkit-line-clamp: 3;   //用来限制在一个块元素中显示的文本的行数
word-break: break-all;   //让浏览器实现在任意位置的换行 *break-all为允许在单词内换行*

其他

input光标颜色

input{
  caret-color: red;
}

画一个太阳

div {
  width: 300px;
  height: 300px;
  background-color: yellow;
  border-radius: 50%;
  box-shadow: 0 0 60px 60px inset rgba(225, 0, 0, 0.7);
}

最后

以上就是一些开发中可能会用到的技巧，后续我还会总结出更多实用小技巧！！！