CSS磨砂效果

墨蓝 2023-01-07 14:30 22阅读 0赞

# 几个样式效果 #

## **（1） 磨砂标签** ##

--------------------

![在这里插入图片描述][2021011811285479.png]

background-color: rgba(28, 28, 28, 0.45);
       font-size: 12px;
       display: inline-block;
       color: rgba(255, 255, 255, 0.85);
       margin-right: 8px;
       backdrop-filter: blur(10px);  // 磨砂效果

--------------------

## **（2）渐变文字颜色** ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70]

.caseChooseLabel{ 
         background-image: linear-gradient(-69deg, #CCAB8D 0%, #A57C57 100%);
         -webkit-background-clip:text; 
         -webkit-text-fill-color:transparent; 
         width: 81px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
      }

--------------------

## **（3）修改图片颜色** ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][20210118113523705.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 2]

## **（4）hover图片缓慢移动** ##

![在这里插入图片描述][20210118114115746.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 3]

## **（5）学习滤镜的参考文档**![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 4] ##

[https://www.icode9.com/content-4-440958.html][https_www.icode9.com_content-4-440958.html]

[2021011811285479.png]: /images/20221119/6bfb0c47c0304d2d8f8ed9944d9fb519.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2021011811331168.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210118113502173.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx,size_16,color_FFFFFF,t_70
[20210118113523705.png]: https://img-blog.csdnimg.cn/20210118113523705.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210118113734864.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx,size_16,color_FFFFFF,t_70
[20210118114115746.png]: https://img-blog.csdnimg.cn/20210118114115746.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210118114051157.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210118120010845.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx,size_16,color_FFFFFF,t_70
[https_www.icode9.com_content-4-440958.html]: https://www.icode9.com/content-4-440958.html