【百度美化 Stylus】百度搜索卡片美化高斯模糊 Baidu CSS Stylus Stylish

Herk (ง •̀_•́)ง

已于 2023-02-16 21:30:31 修改

阅读量2.5k

点赞数 10

分类专栏：桌面美化工具箱子文章标签： stylus css 百度

于 2021-09-15 16:10:01 首次发布

本文链接：https://blog.csdn.net/alpherkin/article/details/120308251

版权

工具箱子同时被 2 个专栏收录

4 篇文章 5 订阅

订阅专栏

桌面美化

1 篇文章 0 订阅

订阅专栏

1.简单介绍

百度美化TAB版 ( 精简美化、卡片模糊、十余种风格一键更换 )

 建议使用设置中氢气系列壁纸，纯色不花眼

利用浏览器插件Stylus，对百度搜索页面风格进行一系列的美化。

现已适配搜索页、资讯页、视频页，点击查看使用教程。

已经上传到 UserStylus ，点击跳转至样式安装页面。

2.更新日志

百度美化TAB 3.0 2021/9/18：

1.加入Stylus预处理，实现更高级的代码逻辑。

2.新增十种背景风格，一键定制自己专属风格。

3.进一步地开放设置，高斯模糊颜色搭配你定！

4.修复几处错版问题，若有问题欢迎联系反馈~

百度美化TAB 3.0 2021/9/16：

1.可自定义风格，调节卡片颜色模糊

2.内置五种可选风格，设置一键更换

3.主要功能

        1.精简繁冗元素，页面重新布局
        2.搜结果卡片化，背景高斯模糊
        3.一键切换样式，定制专属风格

4.食用方法

1.下载浏览器插件： 扩展 Stylus

2. 安装 CSS 样式： Stylus样式百度美化TAB

5.说明注意

1.拥有十数中风格可选，风格涵盖动漫，人物，简约等，可根据喜好自选。

2.本样式尽可能地开放调参设置，不用修改代码也能定制属于自己的风格。

3.建议卡片颜色与背景图主色调相近，更改卡片颜色，卡片阴影，透明度。

4.极少数的网页搜索结果栏卡片化后，适配效果不太完美，欢迎反馈问题。

目前已适配百度网页、资讯页、视频页，效果分别如下图：

6.源码更新 2021/9/16

@-moz-document url-prefix("http://www.baidu.com/s"), url-prefix("https://www.baidu.com/s") {
/*  ==UserStyle== 
    
    @name           百度美化TAB版 (精简美化、卡片模糊、多样式可选)
    @namespace      userstyles.world/user/alpherkin
    @author         无白Herk
    @version        2.5.210915
    @description    百度搜索，卡片模糊，精简美化，自选样式 已适配百度网页、资讯、视频 TCB表示TabulateCardBlur

    @advanced dropdown default "全局默认样式" {
    0 "自定义样式" <<<EOT EOT;
    1 "默认样式1" <<<EOT :root { 
        --bg_img: url(https://pic.3gbizhi.com/2020/0821/20200821111007102.jpg);
        --card_color:  rgba(154, 154, 154, .8);
        --card_shadow: rgba(49, 49, 49, .5);
        --card_radius: 15px;
        --input_color: rgba(166, 167, 168, .85);
        } EOT;
    2 "默认样式2" <<<EOT :root {
        --bg_img: url(https://doge.zzzmh.cn/wallpaper/origin/139d5a3c75724393bcd2ea1ab5350090.jpg?response-content-disposition=attachment);
        --card_color:  rgba(208, 219, 232, .8);
        --card_shadow: rgb(109, 129, 142);
        --card_radius: 15px;
        --input_color: rgba(206, 225, 238, .95);
        } EOT;
    3 "默认样式3" <<<EOT :root {
        --bg_img: url(https://doge.zzzmh.cn/wallpaper/origin/3e8c0bd21c7c4fa3b60e0104028a8dda.jpg?response-content-disposition=attachment);
        --card_color:  rgba(207, 221, 236, .8);
        --card_shadow: rgb(134, 154, 168);
        --card_radius: 15px;
        --input_color: rgba(199, 220, 235, .95);
        } EOT;
    4 "默认样式4" <<<EOT :root {
        --bg_img:url(https://doge.zzzmh.cn/wallpaper/origin/66bf69ac882111ebb6edd017c2d2eca2.jpg?response-content-disposition=attachment);
        --card_color:  rgba(224, 226, 207, .8);
        --card_shadow: rgb(158, 159, 120);
        --card_radius: 15px;
        --input_color: rgba(214, 214, 194, .95);
        } EOT;
    5 "默认样式5" <<<EOT :root {
        --bg_img:url(https://www.wallpaperup.com/wallpaper/download/212854/94376beb019e2f7860dd5de793fdf44a);
        --card_color:  rgba(214, 215, 200, .8);
        --card_shadow: rgb(163, 164, 125);
        --card_radius: 15px;
        --input_color: rgba(212, 212, 192, .95);
        } EOT;
    
    }
    @advanced text  tips        "||||||||||选择自定义样式||||||||||" 以下配置才会生效
    @advanced text  user-img    "填入图片链接" https://pic.3gbizhi.com/2020/0909/20200909114051862.jpg
    @advanced color card-color  "卡片颜色透度" rgba(92, 92, 92, .6)
    @advanced color card-shadow "卡片阴影颜色" rgba(52, 52, 52, .5)
    @advanced text  card-radius "卡片圆角弧度" 15px

    ==/UserStyle== */
}

@-moz-document url-prefix("http://www.baidu.com/s"), url-prefix("https://www.baidu.com/s") {
/* =============用户自定 使用配置============= */
    
/* 变量说明 变量说明 变量说明 变量说明 变量说明
    
        --bg_img：括号内可自定义背景图片链接
        --card_bgcolor:  卡片背景颜色
        --card_radius:   卡片圆角弧度
        --input_color: 搜索框的颜色
    
   变量说明 变量说明 变量说明 变量说明 变量说明 */  
    
/* ——————————————————————————用户自定 使用配置—————————————————————— */ 
    
    /*用户自定义样式*/
    :root {  
        --bg_img:    url( /*[[user-img]]*/);
        --card_color:   /*[[card-color]]*/ ;
        --card_shadow:  /*[[card-shadow]]*/;
        --card_radius:  /*[[card-radius]]*/;
    }
    
    /*自带默认样式*/
    /*[[default]]*/
    
}

@-moz-document url-prefix("http://www.baidu.com/s"), url-prefix("https://www.baidu.com/s") {
/* =============百度搜索 卡片模糊============= */

    /* ————————————————————————搜索结果美化—————————————————————— */
    #container {
        margin: 0 !important;
        width: 100% !important;
    }
    #content_left,
    #content_left>.ecom_pingzhuan.old-pmd+div,
    #content_left>.video_list_container {
        display: flex;
        /*卡片父容器调整*/
        flex-wrap: wrap;
        justify-content: center;
        width: 100% !important;
        padding: 0px !important;
    }
    /* 双栏卡片 圆角模糊 */
    [id^="1"], [id^="2"], [id^="3"], [id^="4"], /*普通搜索结果*/
    [id^="5"], [id^="6"], [id^="7"], [id^="8"], [id^="9"],
    #content_left .video_list.video_short,      /*百度视频搜索*/
    #content_left>div[class='c-container result new-pmd'],
    #content_left>div[class='c-container result'] {
        width: 600px !important;            /*双栏卡片 整体风格*/
        height: 123px !important;
        padding: 8px 0px 0px 8px !important;
        margin: 10px !important;
        display: block !important;
        overflow: auto !important;
        border-radius: var(--card_radius) !important;  /*搜索结果圆角模糊*/
        background: var(--card_color) !important;
        box-shadow: 0px 10px 15px var(--card_shadow) !important;
        transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
        box-sizing: content-box!important;  /*部分卡片属性*/
    }
    /* 卡片内嵌 消除边界 */
    #content_left>div>div>article>section>div,
    #content_left>div[class='c-container result'].c-result-content {
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}


@-moz-document url-prefix("http://www.baidu.com/s"), url-prefix("https://www.baidu.com/s") {
/* =========百度搜索 基础设置=========*/

    /* ———————————————————————百度头部 顶栏设置——————————————————— */
    .s_form/*百度头部 搜索框 */ {
        width: 800px !important;
        margin: auto !important;
        padding: 0 !important;
    }
    .s_ipt_wr/*百度搜索框*/ {
        background-color: var(--card_color) !important;
    }
    .s_ipt_wr:hover, .ipthover, .iptfocus,
    .bdsug.bdsug-new /*搜索框建议卡片*/ {
        background-color: var(--card_color) !important;
    }
    #head/*隐藏搜索框底图*/ {
        position: fixed !important;
        height: 0px !important;
    }
    #s_tab/*搜索选项(网页、资讯、视频)*/ {
        top: -10px !important;
        height: 45px !important;
        padding-left: 0px !important;
        text-align: center!important;
        background: rgba(0, 0, 0, 0) !important;
    }
    #header_top_bar /*资讯页相关数目*/ {
        margin:0 0 0 420px
    }

    /* ————————————————————————搜索结果美化—————————————————————— */
    a {
        color: #4879BD;
        /*搜索结果 标题颜色*/
        font-size: 16px !important;
        text-decoration: none !important;
    }
    a:hover {
        border-bottom: #4879BD 1.2px solid;
        text-decoration: none !important;
    }
    em {
        color: #EA4335;
        font-size: 16px !important;
        text-decoration: none !important;
    }
    .c-showurl.c-color-gray {
        font-size: 12px !important;
    }
    .page-inner {
        padding-left: 10px !important;
        text-align: center!important;
    }
    #page {
        background-color: rgba(0, 0, 0, 0) !important;
    }

    /* ——————————————————————设置页面背景图片—————————————————————— */
    body {
        background-image: var(--bg_img) !important;
        background-attachment: fixed !important;
        background-size: cover !important;
    }
    
    /* ———————————————————————搜索页精简隐藏—————————————————————— */
    #u,                     /*最右上角用户*/
    #rs,                    /*相关搜索条数*/
    #result_logo img,       /*百度logo图片*/
    #content_right,         /*百度右侧推广*/
    ::-webkit-scrollbar,   /*右垂直滚动条*/
    .nums.new_nums,         /*相关搜索数目*/
    .foot-container_2X1Nt,  /*最底部帮助栏*/
    .foot-inner,            /*最底部帮助栏*/
    .c-tools.c-gap-left,    /*百度快照图标*/
    .m.c-gap-left.c-color-gray.kuaizhao.snapshoot {
        display: none;
    }
}

免责声明：源码仅用于学习交流，请勿用于非法用途，转载请联系作者授权。

Herk (ง •̀_•́)ง

关注

10
点赞
踩
13

收藏

觉得还不错? 一键收藏
12
评论
【百度美化 Stylus】百度搜索卡片美化高斯模糊 Baidu CSS Stylus Stylish

利用插件对百度页面CSS样式美化。现已适配搜索页、资讯页、视频页。 1.精简繁冗元素，删除广告推广2.页面重新布局，搜结果卡片化 3.模糊卡片背景，设置背景图片 4.附有可选背景，也可自行定制...
复制链接

扫一扫