西北乱跑娃 -- css样式美化导航-CSDN博客

本文链接：https://blog.csdn.net/human_soul/article/details/126025508

一、overflow滚动条美化

.right-box::-webkit-scrollbar-track {
	background-color: #414541;
}

.right-box::-webkit-scrollbar {
    width: 8px;
}

.right-box::-webkit-scrollbar-thumb {
    background-color: #ec5729;
    border-radius: 10px;
}

二、全面屏无滚动条（适合登录页面与后台管理界面）

body,html{
	 height: 100%;
   width:100%;
     margin:0 0 0 0;
     overflow:hidden hidden;
 }

 body{
     background-image: url("../../static/admin/public/images/login_bg.jpg");
     background-size: 100% 100%;
     background-repeat: no-repeat;
 }

三、图片样式美化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .img1 {
             /*针对特定浏览器的过滤器*/
             -webkit-filter: grayscale(100%);
             /*通用过滤器*/
             filter: grayscale(100%);
         }

        .img2 {
            /*越接近0，则偏向原图；越接近100，则灰度越高*/
            filter: grayscale(50%);
        }

        .img3{
            /*设置图片透明度；值越大透明度越低*/
            -webkit-filter: grayscale(100%) opacity(40%);
        }

        .img4{
            /*复古黄，值越大越黄*/
            filter: sepia(50%);
        }

        .img5{
            /*加深图片颜色*/
            filter: saturate(200%);
        }

        .img6{
            /*drop-shadow给图像加阴影*/
            /*filter: transition: all 1s linear;*/
            box-shadow: 10px 10px 5px grey;
            border-radius: 50%;
            filter: blur(0px) ;
            transition: all 2s linear;
        }

        .img6:hover{
            box-shadow: 10px 10px 5px grey;
            /*transition-duration: 2s;*/
            /*transform: scale(0.8);*/
            border-radius: 50%;
            transition: all 2s linear;
            filter: blur(5px);
            transform: rotate(360deg);
         }

        .img6:{
            transition: all 2s linear;
            /*transform: scale(0.8);*/
            filter: blur(5px);
            transform: rotate(360deg);
        }

        .img7{
            /*冷暖色调反转*/
            filter: hue-rotate(180deg);
        }

        .img7:hover{
            transition-duration: 2s;
            filter: hue-rotate(0deg);
            /*调整图片明暗度*/
            /*filter: contrast(50%);*/
        }


    </style>
</head>
<body>

<img class="img1" src="pic.png" alt=""><br>
<img class="img2" src="pic.png" alt=""><br>
<img class="img3" src="pic.png" alt=""><br>
<img class="img4" src="pic.png" alt=""><br>
<img class="img5" src="pic.png" alt=""><br>
<img class="img6" src="fang.png" alt=""><br><br><br>
<img class="img7" src="pic.png" alt=""><br>

</body>
</html>

四、字体美化

a{
    text-decoration: none;
}

.fonts{
    /*控制字体*/
    font-family: "等线 Light";
    /*控制字体厚度 100-900*/
    font-weight: bold;
    color: #d34428;
    /*行间距*/
    line-height: 30px;
    /*文本对齐方式 left、center、right*/
    text-align: center;
    /*首行缩进*/
    text-indent：2em;
     /* 描边效果，2px是描边宽度，black是描边颜色 */
    -webkit-text-stroke: 2px black;
}

五、玻璃拟态效果

https://www.fly63.com/tool/glassmorphism/
https://neumorphism.io/#e0e0e0
https://glassgenerator.netlify.app/#demo-modal

六、网页一键变灰

    <style>
    html{filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}
    </style>