分享个深色bing自用css样式
body.b_dark {
#b_header {
position: relative;
z-index: 1000 !important;
}
#b_header, #b_header.b_focus, #sb_form, #b_content {
background: transparent !important;
box-shadow: none !important;
}
.b_searchboxForm {
background-color: rgba(255, 255, 255, 0.05) !important;
backdrop-filter: brightness(1.2) contrast(1.1) blur(1px) !important;
border: none !important; outline: none !important;
border-radius: 28px !important;
box-shadow:
inset 0 1.5px 1px rgba(255, 255, 255, 0.7),
inset 1px 0 1px rgba(0, 255, 255, 0.6),
inset -1px 0 1px rgba(255, 0, 255, 0.6)
!important;
transition: background-color 0.4s, backdrop-filter 0.4s, transform 0.4s, box-shadow 0.4s !important;
transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1) !important;
}
.b_searchboxForm:hover {
box-shadow:
inset 0 1.5px 1px rgba(255, 255, 255, 0.8),
inset 2px 0 2px rgba(0, 255, 255, 0.7),
inset -2px 0 2px rgba(255, 0, 255, 0.7)
!important;
}
.b_searchboxForm:focus-within {
box-shadow:
0 0 35px 8px rgba(0, 255, 255, 0.3),
0 0 15px 4px rgba(80, 180, 255, 0.6),
inset 0 1px 1px rgba(255, 255, 255, 0.9)
!important;
}
.b_searchboxForm .b_searchbox { background: transparent !important; color: #FFFFFF !important; }
#b_header[style="top: 0px;"] .b_searchboxForm {
background-color: rgba(30, 30, 30, 0.4) !important;
backdrop-filter: blur(25px) saturate(120%) !important;
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.25),
inset 1px 0 1px rgba(0, 255, 255, 0.6),
inset -1px 0 1px rgba(255, 0, 255, 0.6)
!important;
}
#b_header[style="top: 0px;"] .b_searchboxForm:hover {
background-color: rgba(45, 45, 45, 0.75) !important;
backdrop-filter: blur(18px) saturate(120%) !important;
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.3),
inset 2px 0 2px rgba(0, 255, 255, 0.7),
inset -2px 0 2px rgba(255, 0, 255, 0.7)
!important;
}
#b_header[style="top: 0px;"] .b_searchboxForm:focus-within {
background-color: rgba(45, 45, 45, 0.75) !important;
backdrop-filter: blur(18px) saturate(120%) !important;
box-shadow:
0 0 35px 8px rgba(0, 255, 255, 0.3),
0 0 15px 4px rgba(80, 180, 255, 0.6),
inset 0 1px 1px rgba(255, 255, 255, 0.4)
!important;
}
.b_searchboxForm.as_show {
background: transparent !important;
backdrop-filter: none !important;
transition-duration: 0s !important;
}
#b_header[style="top: 0px;"] .b_searchboxForm.as_show {
background-color: rgba(20, 20, 20, 0.7) !important;
backdrop-filter: none !important;
transition-duration: 0s !important;
}
#sw_as, #sw_as #sa_ul {
background: transparent !important; border: none !important;
box-shadow: none !important; padding: 0 !important; margin: 0 !important;
}
#sw_as .sa_as {
background-color: rgba(30, 30, 30, 0.55) !important;
backdrop-filter: blur(25px) saturate(120%) !important;
border-radius: 20px !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important;
margin-top: 8px !important;
padding: 10px !important;
}
#sw_as .sa_sg {
background: transparent !important; border-radius: 12px !important;
padding: 2px 4px !important; transition: background-color 0.15s ease-out !important;
}
#sw_as .sa_sg.sa_hv { background: rgba(255, 255, 255, 0.15) !important; }
#sw_as .sa_tm, #sw_as .sa_tmHS { color: #EAEAEA !important; }
#sw_as .sa_sg.sa_hv .sa_tm, #sw_as .sa_sg.sa_hv .sa_tmHS { color: #FFFFFF !important; }
#sw_as .sa_tm strong { color: #FFFFFF !important; }
#as_foot {
background: transparent !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
padding-top: 8px !important; margin-top: 4px !important;
}
#as_foot a { color: #C0C0C0 !important; transition: color 0.2s ease !important; }
#as_foot a:hover { color: #FFFFFF !important; background: none !important; }
.richrsrailsuggestion a {
display: flex !important; align-items: center !important; justify-content: space-between !important;
width: 280px !important; background: rgba(55, 55, 60, 0.5) !important;
backdrop-filter: blur(14px) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important; border-radius: 12px !important;
padding: 10px 14px !important; transition: all 0.25s cubic-bezier(0.1, 0.9, 0.2, 1) !important;
color: #EAEAEA !important; text-decoration: none !important;
}
.richrsrailsuggestion a:hover {
transform: translateY(-5px) scale(1.05) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
background: rgba(70, 70, 75, 0.7) !important; border-color: rgba(255, 255, 255, 0.25) !important;
color: #FFFFFF !important;
}
.richrsrailsuggestion_text {
margin: 0 8px !important; white-space: nowrap !important;
overflow: hidden !important; text-overflow: ellipsis !important;
}
.richrsrailwrapper, #b_context > li.b_ans, .richrsrailsuggestion {
background: transparent !important; border: none !important; box-shadow: none !important;
padding: 0 !important; margin-bottom: 12px !important; transition: none !important;
}
.richrsrailtitle h2 {
color: #EAEAEA !important; font-weight: 600 !important;
padding-left: 5px !important; padding-bottom: 15px !important;
}
#b_content #b_results > li.b_algo,
#b_content #b_results > li.b_ans,
.b_msg,
.b_canvas {
background-color: rgba(30, 30, 30, 0.5) !important;
backdrop-filter: blur(20px) saturate(120%) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 16px !important;
padding: 16px !important;
margin-bottom: 20px !important;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}
#b_content #b_results > li.b_algo:hover,
#b_content #b_results > li.b_ans:hover,
.b_msg:hover,
.b_canvas:hover {
transform: translateY(-5px) !important;
background-color: rgba(40, 40, 40, 0.7) !important;
border-color: rgba(255, 255, 255, 0.25) !important;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4) !important;
}
}
好看捏
更新一下,解决了页面向下滚动搜索栏不置顶等部分问题,新加了copilot回答的磨砂效果。
/* --- 总开关:确保所有样式仅在必应原生深色模式下生效 --- */
body.b_dark {
/* --- 1. 核心布局问题 --- */
#b_header {
position: relative;
z-index: 1000 !important;
}
#b_header, #b_header.b_focus, #sb_form, #b_content {
background: transparent !important;
box-shadow: none !important;
}
/* --- 2. 搜索栏与建议框的动态模糊效果 --- */
.b_searchboxForm {
background-color: rgba(255, 255, 255, 0.05) !important;
backdrop-filter: brightness(1.2) contrast(1.1) blur(1px) !important;
border: none !important;
outline: none !important;
border-radius: 28px !important;
box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.7), inset 1px 0 1px rgba(0, 255, 255, 0.6), inset -1px 0 1px rgba(255, 0, 255, 0.6) !important;
transition: background-color 0.4s, backdrop-filter 0.4s, transform 0.4s, box-shadow 0.4s !important;
transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1) !important;
}
.b_searchboxForm:hover {
box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.8), inset 2px 0 2px rgba(0, 255, 255, 0.7), inset -2px 0 2px rgba(255, 0, 255, 0.7) !important;
}
.b_searchboxForm:focus-within {
box-shadow: 0 0 35px 8px rgba(0, 255, 255, 0.3), 0 0 15px 4px rgba(80, 180, 255, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
}
.b_searchboxForm .b_searchbox {
background: transparent !important;
color: #FFFFFF !important;
}
#b_header[style="top: 0px;"] .b_searchboxForm {
background-color: rgba(30, 30, 30, 0.4) !important;
backdrop-filter: blur(25px) saturate(120%) !important;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25), inset 1px 0 1px rgba(0, 255, 255, 0.6), inset -1px 0 1px rgba(255, 0, 255, 0.6) !important;
}
#b_header[style="top: 0px;"] .b_searchboxForm:hover {
background-color: rgba(45, 45, 45, 0.75) !important;
backdrop-filter: blur(18px) saturate(120%) !important;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), inset 2px 0 2px rgba(0, 255, 255, 0.7), inset -2px 0 2px rgba(255, 0, 255, 0.7) !important;
}
#b_header[style="top: 0px;"] .b_searchboxForm:focus-within {
background-color: rgba(45, 45, 45, 0.75) !important;
backdrop-filter: blur(18px) saturate(120%) !important;
box-shadow: 0 0 35px 8px rgba(0, 255, 255, 0.3), 0 0 15px 4px rgba(80, 180, 255, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
}
/* --- 3. 建议框相关样式 --- */
.b_searchboxForm.as_show {
background: transparent !important;
backdrop-filter: none !important;
transition-duration: 0s !important;
}
#b_header[style="top: 0px;"] .b_searchboxForm.as_show {
background-color: rgba(20, 20, 20, 0.7) !important;
backdrop-filter: none !important;
transition-duration: 0s !important;
}
#sw_as, #sw_as #sa_ul {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
#sw_as .sa_as {
background-color: rgba(30, 30, 30, 0.55) !important;
backdrop-filter: blur(25px) saturate(120%) !important;
border-radius: 20px !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important;
margin-top: 8px !important;
padding: 10px !important;
}
#sw_as .sa_sg {
background: transparent !important;
border-radius: 12px !important;
padding: 2px 4px !important;
transition: background-color 0.15s ease-out !important;
}
#sw_as .sa_sg.sa_hv {
background: rgba(255, 255, 255, 0.15) !important;
}
#sw_as .sa_tm,
#sw_as .sa_tmHS {
color: #EAEAEA !important;
}
#sw_as .sa_sg.sa_hv .sa_tm,
#sw_as .sa_sg.sa_hv .sa_tmHS {
color: #FFFFFF !important;
}
#sw_as .sa_tm strong {
color: #FFFFFF !important;
}
#as_foot {
background: transparent !important;
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
padding-top: 8px !important;
margin-top: 4px !important;
}
#as_foot a {
color: #C0C0C0 !important;
transition: color 0.2s ease !important;
}
#as_foot a:hover {
color: #FFFFFF !important;
background: none !important;
}
/* --- 4. 右侧悬浮卡片样式 --- */
.richrsrailsuggestion a, .b_rrsr .b_vList.b_divsec li a {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 380px !important;
background: rgba(55, 55, 60, 0.5) !important;
backdrop-filter: blur(14px) !important;
border: 0px solid transparent !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
border-radius: 12px !important;
padding: 10px 14px !important;
transition: all 0.3s cubic-bezier(0.1, 0.9, 0.2, 1) !important;
color: #EAEAEA !important;
text-decoration: none;
}
.richrsrailsuggestion a:hover, .b_rrsr .b_vList.b_divsec li a:hover {
transform: translateY(-5px) scale(1.05) !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
background: rgba(70, 70, 75, 0.7) !important;
border-color: rgba(255, 255, 255, 0) !important;
color: #FFFFFF !important;
}
.richrsrailsuggestion_text {
margin: 0 8px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.richrsrailwrapper, #b_context > li.b_ans, .richrsrailsuggestion {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin-bottom: 12px !important;
transition: none !important;
}
.richrsrailtitle h2 {
color: #EAEAEA !important;
font-weight: 600 !important;
padding-left: 5px !important;
padding-bottom: 15px !important;
}
.b_ans .b_vList.b_divsec li a {
/* 为悬停动画添加过渡效果 */
transition: background-color 0.2s ease-out !important;
padding: 4px 8px !important;
border-radius: 8px !important;
}
.b_ans .b_vList.b_divsec li a:hover {
background: rgba(255, 255, 255, 0.1) !important;
}
/* --- 5. 全局卡片样式 --- */
#b_content #b_results > li.b_algo,
#b_content #b_results > li.b_ans,
.b_msg, .ca_main, .b_canvas {
background-color: rgba(30, 30, 30, 0.5) !important;
backdrop-filter: blur(20px) saturate(120%) !important;
border: 1px solid rgba(255, 255, 255, 0) !important;
border-radius: 16px !important;
padding: 16px !important;
margin-bottom: 20px !important;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}
#b_content #b_results > li.b_algo:hover,
#b_content #b_results > li.b_ans:hover,
.b_msg:hover,
.b_canvas:hover, .sp-separator.AC, .ent-dtab-btn-new {
transform: translateY(-5px) !important;
background-color: rgba(40, 40, 40, 0.7) !important;
border-color: rgba(255, 255, 255, 0) !important;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4) !important;
}
/* --- 6. 修复元素的纯色背景问题 --- */
.gs_h.gs_caphead, .gs_cit_wrapper, .cit_exp_cont, .gs_iv_link, .b_rc_gb_sub_cell, .btitle.b_title, .mc_vtvc, .b_imagePair.wide_wideAlgo, .slide, .iacfm.iacfic.mmkiaacf.iacfca {
background: transparent !important;
}
.b_vList.b_divsec li, .b_vList.b_divsec li a, .b_vList.b_divsec li:hover, .b_vList.b_divsec li a:hover, .b_wpTabsWrapper, .ent-dtab-content, .ent-dtab-style-content.ent-dtab-curr-content,.b_wpt_chat *,.b_wpt_bg *,.b_wpt_bg, #xmonwrapper, .tab-menu.tab-flex ul li, .tab-menu.tab-hasnav ul li{
background: transparent !important;
}
/* --- 7. 移除边框 --- */
.mc_vtvc_th.b_canvas, .mc_vtvc_htc, .ca_main,.sydwrap_wrapper {
border: none !important;
box-shadow: none !important;
}
/* --- 8. AI回答 --- */
.ca_main {
width: 100% !important;
}
.ca_main .b_canvas {
background: transparent !important;
backdrop-filter: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
.b_gwaText:has(a) {
display: flex !important;
}
.b_gwaText a {
flex-grow: 1 !important;
}
/*---9. 维护 ---*/
.b_vList.b_divsec *, .sydwrap_wrapper* {
background: transparent !important;
}
.mc_vtvc_th.b_canvas *, .mc_vtvc_htc * {
border: none !important;
box-shadow: none !important;
}
}
你好老哥,我这边有点问题已经圈出,请问怎么修改代码来适配我这边呢,感谢
你好老哥,我这边有点问题已经圈出,请问怎么修改代码来适配我这边呢,感谢
![]()
相关搜索的问题把以下代码加上去即可:
.b_ans #brsv3 .b_vList.b_divsec {
display: flex !important;
flex-wrap: wrap !important;
gap: 16px !important;
}
.b_ans #brsv3 .b_vList.b_divsec > li {
min-width: 300px !important;
width: auto !important;
}
反馈被挡住的问题我还没遇到过,之后遇到了再更新吧。
8.24更新:修复在视频,学术,词典页面时相关搜索建议框背景模糊未正确应用问题。
修复了部分问题,替换了原先搜索框的外发光特效
/* --- 总开关:确保所有样式仅在必应原生深色模式下生效 --- */
body.b_dark {
/* --- 1. 核心布局问题 --- */
#b_header {
position: relative;
z-index: 1000 !important;
}
#b_header, #b_header.b_focus, #sb_form, #b_content {
background: transparent !important;
box-shadow: none !important;
}
/* --- 2. 搜索栏与建议框的动态模糊效果 --- */
.b_searchboxForm {
position: relative !important;
isolation: isolate !important; /* 创建堆叠上下文 */
background-color: rgba(255, 255, 255, 0.05) !important;
backdrop-filter: brightness(1.2) contrast(1.1) blur(1px) !important;
border: none !important;
outline: none !important;
border-radius: 28px !important;
box-shadow:
inset 0 1.5px 1px rgba(255, 255, 255, 0.7),
inset 1px 0 1px rgba(0, 255, 255, 0.6),
inset -1px 0 1px rgba(255, 0, 255, 0.6) !important;
transition: all 0.4s cubic-bezier(0.1, 0.9, 0.2, 1) !important;
}
form#sb_form[action="/dict/search"] .b_searchboxForm,
form#sb_form[action="/academic/search"] .b_searchboxForm,
form#sb_form[action="/videos/search"] .b_searchboxForm {
backdrop-filter: none !important;
}
.b_searchboxForm::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-image: linear-gradient(
200deg,
rgba(216, 52, 67, 0.6),
rgba(194, 24, 91, 0.6),
rgba(106, 27, 154, 0.5),
rgba(40, 51, 147, 0.6)
) !important;
border-radius: 28px;
z-index: -1;
opacity: 0;
transition: opacity 1s cubic-bezier(0.1, 0.9, 0.2, 1) !important;
}
/* --- 交互状态:悬停、点击、建议框出现 --- */
.b_searchboxForm:hover {
box-shadow:
inset 0 2.5px 2px rgba(255, 255, 255, 0.8),
inset 2px 0 2px rgba(0, 255, 255, 0.7),
inset -2px 0 2px rgba(255, 0, 255, 0.7) !important;
}
.b_searchboxForm:focus-within.as_show::before {
opacity: 1 !important;
}
/* --- 输入框文字 --- */
.b_searchboxForm .b_searchbox {
background: transparent !important;
color: #FFFFFF !important;
}
/* --- 置顶状态下的样式覆盖 --- */
#b_header[style="top: 0px;"] .b_searchboxForm {
background-color: rgba(30, 30, 30, 0.4) !important;
backdrop-filter: blur(25px) saturate(120%) !important;
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.25),
inset 1px 0 1px rgba(0, 255, 255, 0.6),
inset -1px 0 1px rgba(255, 0, 255, 0.6) !important;
}
#b_header[style="top: 0px;"] .b_searchboxForm:hover {
background-color: rgba(45, 45, 45, 0.75) !important;
backdrop-filter: blur(18px) saturate(120%) !important;
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.3),
inset 2px 0 2px rgba(0, 255, 255, 0.7),
inset -2px 0 2px rgba(255, 0, 255, 0.7) !important;
}
/* --- 3. 建议框相关样式 --- */
.b_searchboxForm.as_show {
background: transparent !important;
backdrop-filter: none !important;
transition-duration: 0s !important;
}
#b_header[style="top: 0px;"] .b_searchboxForm.as_show {
background-color: rgba(20, 20, 20, 0.7) !important;
backdrop-filter: none !important;
transition-duration: 0s !important;
}
#sw_as, #sw_as #sa_ul {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
.sa_as {
background-color: rgba(30, 30, 30, 0.55) !important;
backdrop-filter: blur(25px) saturate(120%) !important;
border-radius: 20px !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important;
margin-top: 8px !important;
padding: 10px !important;
z-index: 1000 !important;
}
.sa_sg {
background: transparent !important;
border-radius: 12px !important;
padding: 2px 4px !important;
transition: background-color 0.15s ease-out !important;
}
.sa_sg.sa_hv {
background: rgba(255, 255, 255, 0.15) !important;
}
#sw_as .sa_tm,
#sw_as .sa_tmHS {
color: #EAEAEA !important;
}
#sw_as .sa_sg.sa_hv .sa_tm,
#sw_as .sa_sg.sa_hv .sa_tmHS {
color: #FFFFFF !important;
}
#sw_as .sa_tm strong {
color: #FFFFFF !important;
}
#as_foot, #b_PagAboveFooter {
background: transparent !important;
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
padding-top: 8px !important;
margin-top: 4px !important;
}
#as_foot a {
color: #C0C0C0 !important;
transition: color 0.2s ease !important;
}
#as_foot a:hover {
color: #FFFFFF !important;
background: none !important;
}
/* --- 4. 右侧悬浮卡片样式 --- */
.richrsrailsuggestion a, .b_rrsr .b_vList.b_divsec li a {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: 380px !important;
background: rgba(55, 55, 60, 0.5) !important;
backdrop-filter: blur(14px) !important;
border: 0px solid transparent !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
border-radius: 12px !important;
padding: 10px 14px !important;
transition: all 0.3s cubic-bezier(0.1, 0.9, 0.2, 1) !important;
color: #EAEAEA !important;
text-decoration: none;
}
.richrsrailsuggestion a:hover, .b_rrsr .b_vList.b_divsec li a:hover {
transform: translateY(-5px) scale(1.05) !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
background: rgba(70, 70, 75, 0.7) !important;
border-color: rgba(255, 255, 255, 0) !important;
color: #FFFFFF !important;
}
.richrsrailsuggestion_text {
margin: 0 8px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.richrsrailwrapper, #b_context > li.b_ans, .richrsrailsuggestion {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin-bottom: 12px !important;
transition: none !important;
}
.richrsrailtitle h2 {
color: #EAEAEA !important;
font-weight: 600 !important;
padding-left: 5px !important;
padding-bottom: 15px !important;
}
.b_ans .b_vList.b_divsec li a {
transition: background-color 0.2s ease-out !important;
padding: 4px 8px !important;
border-radius: 8px !important;
}
.b_ans .b_vList.b_divsec li a:hover {
background: rgba(255, 255, 255, 0.1) !important;
}
/* --- 5. 全局卡片样式 --- */
#b_content #b_results > li.b_algo,
#b_content #b_results > li.b_ans,
#b_content #b_results > li.aca_algo,
.b_msg, .ca_main, .b_canvas, .rs_area.b_cards, .aca_algo_count {
background-color: rgba(30, 30, 30, 0.5) !important;
backdrop-filter: blur(20px) saturate(120%) !important;
border: 1px solid rgba(255, 255, 255, 0) !important;
border-radius: 16px !important;
padding: 16px !important;
margin-bottom: 20px !important;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}
.aca_filterBar, .sb_pagS {
background-color: rgba(30, 30, 30, 0.5) !important;
backdrop-filter: blur(20px) saturate(120%) !important;
border: 1px solid rgba(255, 255, 255, 0) !important;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
border-radius: 16px !important;
padding: 3px !important;
}
#b_content #b_results > li.b_algo:hover,
#b_content #b_results > li.b_ans:hover,
#b_content #b_results > li.aca_algo:hover,
.b_msg:hover,
.b_canvas:hover, .sp-separator.AC, .ent-dtab-btn-new {
transform: translateY(-5px) !important;
background-color: rgba(40, 40, 40, 0.7) !important;
border-color: rgba(255, 255, 255, 0) !important;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4) !important;
}
/* --- 6. 修复元素的纯色背景问题 --- */
.gs_h.gs_caphead, .gs_cit_wrapper, .cit_exp_cont, .gs_iv_link, .b_rc_gb_sub_cell, .btitle.b_title, .mc_vtvc, .b_imagePair.wide_wideAlgo, .slide, .iacfm.iacfic.mmkiaacf.iacfca {
background: transparent !important;
}
.b_vList.b_divsec li, .b_vList.b_divsec li a, .b_vList.b_divsec li:hover, .b_vList.b_divsec li a:hover, .b_wpTabsWrapper, .ent-dtab-content, .ent-dtab-style-content.ent-dtab-curr-content,.b_wpt_chat *,.b_wpt_bg *,.b_wpt_bg, #xmonwrapper, .tab-menu.tab-flex ul li, .tab-menu.tab-hasnav ul li{
background: transparent !important;
}
/* --- 7. 移除边框 --- */
.mc_vtvc_th.b_canvas, .mc_vtvc_htc, .ca_main,.sydwrap_wrapper {
border: none !important;
box-shadow: none !important;
}
/* --- 8. AI回答 --- */
.ca_main {
width: 100% !important;
}
.ca_main .b_canvas {
background: transparent !important;
backdrop-filter: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
.composer_container {
background-image: linear-gradient(
to top,
rgba(30, 30, 30, 1),
rgba(0, 0, 0, 0)
) !important;
background-color: transparent !important;
backdrop-filter: blur(5px) saturate(120%) !important;
border: none !important;
padding: 16px !important;
}
.b_gwaText:has(a) {
display: flex !important;
}
.b_gwaText a {
flex-grow: 1 !important;
}
/*--- 9. 搜索结果中相关搜索 ---*/
.b_ans #brsv3 .b_vList.b_divsec {
display: flex !important;
flex-wrap: wrap !important;
gap: 16px !important;
}
.b_ans #brsv3 .b_vList.b_divsec > li {
min-width: 300px !important;
width: auto !important;
}
/*--- 10. 维护 ---*/
.b_vList.b_divsec *, .sydwrap_wrapper* {
background: transparent !important;
}
.mc_vtvc_th.b_canvas *, .mc_vtvc_htc * {
border: none !important;
box-shadow: none !important;
}
}
更新一下,修复了部分问题,替换了原先搜索框的外发光特效
/* --- 总开关:确保所有样式仅在必应原生深色模式下生效 --- */ body.b_dark { /* --- 1. 核心布局问题 --- */ #b_header { position: relative; z-index: 1000 !important; } #b_header, #b_header.b_focus, #sb_form, #b_content { background: transparent !important; box-shadow: none !important; } /* --- 2. 搜索栏与建议框的动态模糊效果 --- */ .b_searchboxForm { position: relative !important; isolation: isolate !important; /* 创建堆叠上下文 */ background-color: rgba(255, 255, 255, 0.05) !important; backdrop-filter: brightness(1.2) contrast(1.1) blur(1px) !important; border: none !important; outline: none !important; border-radius: 28px !important; box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.7), inset 1px 0 1px rgba(0, 255, 255, 0.6), inset -1px 0 1px rgba(255, 0, 255, 0.6) !important; /* 合并后的动画效果 */ transition: all 0.4s cubic-bezier(0.1, 0.9, 0.2, 1) !important; } .b_searchboxForm::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient( 200deg, rgba(216, 52, 67, 0.6), rgba(194, 24, 91, 0.6), rgba(106, 27, 154, 0.5), rgba(40, 51, 147, 0.6) ) !important; border-radius: 28px; z-index: -1; opacity: 0; transition: opacity 1s cubic-bezier(0.1, 0.9, 0.2, 1) !important; } /* --- 交互状态:悬停、点击、建议框出现 --- */ .b_searchboxForm:hover { box-shadow: inset 0 2.5px 2px rgba(255, 255, 255, 0.8), inset 2px 0 2px rgba(0, 255, 255, 0.7), inset -2px 0 2px rgba(255, 0, 255, 0.7) !important; } .b_searchboxForm:focus-within.as_show::before { opacity: 1 !important; } /* --- 输入框文字 --- */ .b_searchboxForm .b_searchbox { background: transparent !important; color: #FFFFFF !important; } /* --- 置顶状态下的样式覆盖 --- */ #b_header[style="top: 0px;"] .b_searchboxForm { background-color: rgba(30, 30, 30, 0.4) !important; backdrop-filter: blur(25px) saturate(120%) !important; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25), inset 1px 0 1px rgba(0, 255, 255, 0.6), inset -1px 0 1px rgba(255, 0, 255, 0.6) !important; } #b_header[style="top: 0px;"] .b_searchboxForm:hover { background-color: rgba(45, 45, 45, 0.75) !important; backdrop-filter: blur(18px) saturate(120%) !important; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), inset 2px 0 2px rgba(0, 255, 255, 0.7), inset -2px 0 2px rgba(255, 0, 255, 0.7) !important; } /* --- 3. 建议框相关样式 --- */ .b_searchboxForm.as_show { background: transparent !important; backdrop-filter: none !important; transition-duration: 0s !important; } #b_header[style="top: 0px;"] .b_searchboxForm.as_show { background-color: rgba(20, 20, 20, 0.7) !important; backdrop-filter: none !important; transition-duration: 0s !important; } #sw_as, #sw_as #sa_ul { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } #sw_as .sa_as { background-color: rgba(30, 30, 30, 0.55) !important; backdrop-filter: blur(25px) saturate(120%) !important; border-radius: 20px !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important; margin-top: 8px !important; padding: 10px !important; } #sw_as .sa_sg { background: transparent !important; border-radius: 12px !important; padding: 2px 4px !important; transition: background-color 0.15s ease-out !important; } #sw_as .sa_sg.sa_hv { background: rgba(255, 255, 255, 0.15) !important; } #sw_as .sa_tm, #sw_as .sa_tmHS { color: #EAEAEA !important; } #sw_as .sa_sg.sa_hv .sa_tm, #sw_as .sa_sg.sa_hv .sa_tmHS { color: #FFFFFF !important; } #sw_as .sa_tm strong { color: #FFFFFF !important; } #as_foot { background: transparent !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; padding-top: 8px !important; margin-top: 4px !important; } #as_foot a { color: #C0C0C0 !important; transition: color 0.2s ease !important; } #as_foot a:hover { color: #FFFFFF !important; background: none !important; } /* --- 4. 右侧悬浮卡片样式 --- */ .richrsrailsuggestion a, .b_rrsr .b_vList.b_divsec li a { display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 380px !important; background: rgba(55, 55, 60, 0.5) !important; backdrop-filter: blur(14px) !important; border: 0px solid transparent !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important; border-radius: 12px !important; padding: 10px 14px !important; transition: all 0.3s cubic-bezier(0.1, 0.9, 0.2, 1) !important; color: #EAEAEA !important; text-decoration: none; } .richrsrailsuggestion a:hover, .b_rrsr .b_vList.b_divsec li a:hover { transform: translateY(-5px) scale(1.05) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important; background: rgba(70, 70, 75, 0.7) !important; border-color: rgba(255, 255, 255, 0) !important; color: #FFFFFF !important; } .richrsrailsuggestion_text { margin: 0 8px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .richrsrailwrapper, #b_context > li.b_ans, .richrsrailsuggestion { background: transparent !important; border: none !important; padding: 0 !important; margin-bottom: 12px !important; transition: none !important; } .richrsrailtitle h2 { color: #EAEAEA !important; font-weight: 600 !important; padding-left: 5px !important; padding-bottom: 15px !important; } .b_ans .b_vList.b_divsec li a { /* 为悬停动画添加过渡效果 */ transition: background-color 0.2s ease-out !important; padding: 4px 8px !important; border-radius: 8px !important; } .b_ans .b_vList.b_divsec li a:hover { background: rgba(255, 255, 255, 0.1) !important; } /* --- 5. 全局卡片样式 --- */ #b_content #b_results > li.b_algo, #b_content #b_results > li.b_ans, .b_msg, .ca_main, .b_canvas { background-color: rgba(30, 30, 30, 0.5) !important; backdrop-filter: blur(20px) saturate(120%) !important; border: 1px solid rgba(255, 255, 255, 0) !important; border-radius: 16px !important; padding: 16px !important; margin-bottom: 20px !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important; transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; } #b_content #b_results > li.b_algo:hover, #b_content #b_results > li.b_ans:hover, .b_msg:hover, .b_canvas:hover, .sp-separator.AC, .ent-dtab-btn-new { transform: translateY(-5px) !important; background-color: rgba(40, 40, 40, 0.7) !important; border-color: rgba(255, 255, 255, 0) !important; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4) !important; } /* --- 6. 修复元素的纯色背景问题 --- */ .gs_h.gs_caphead, .gs_cit_wrapper, .cit_exp_cont, .gs_iv_link, .b_rc_gb_sub_cell, .btitle.b_title, .mc_vtvc, .b_imagePair.wide_wideAlgo, .slide, .iacfm.iacfic.mmkiaacf.iacfca { background: transparent !important; } .b_vList.b_divsec li, .b_vList.b_divsec li a, .b_vList.b_divsec li:hover, .b_vList.b_divsec li a:hover, .b_wpTabsWrapper, .ent-dtab-content, .ent-dtab-style-content.ent-dtab-curr-content,.b_wpt_chat *,.b_wpt_bg *,.b_wpt_bg, #xmonwrapper, .tab-menu.tab-flex ul li, .tab-menu.tab-hasnav ul li{ background: transparent !important; } /* --- 7. 移除边框 --- */ .mc_vtvc_th.b_canvas, .mc_vtvc_htc, .ca_main,.sydwrap_wrapper { border: none !important; box-shadow: none !important; } /* --- 8. AI回答 --- */ .ca_main { width: 100% !important; } .ca_main .b_canvas { background: transparent !important; backdrop-filter: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; } .b_gwaText:has(a) { display: flex !important; } .b_gwaText a { flex-grow: 1 !important; } /*--- 9. 搜索结果中相关搜索 ---*/ .b_ans #brsv3 .b_vList.b_divsec { display: flex !important; flex-wrap: wrap !important; gap: 16px !important; } .b_ans #brsv3 .b_vList.b_divsec > li { min-width: 300px !important; width: auto !important; } /*--- 10. 维护 ---*/ .b_vList.b_divsec *, .sydwrap_wrapper* { background: transparent !important; } .mc_vtvc_th.b_canvas *, .mc_vtvc_htc * { border: none !important; box-shadow: none !important; } }
老哥,用你最新的 css 样式在必应学术页面透明度似乎有点问题,该怎么解决呀,谢谢
更新一下,修复了部分问题,替换了原先搜索框的外发光特效
/* --- 总开关:确保所有样式仅在必应原生深色模式下生效 --- */ body.b_dark { /* --- 1. 核心布局问题 --- */ #b_header { position: relative; z-index: 1000 !important; } #b_header, #b_header.b_focus, #sb_form, #b_content { background: transparent !important; box-shadow: none !important; } /* --- 2. 搜索栏与建议框的动态模糊效果 --- */ .b_searchboxForm { position: relative !important; isolation: isolate !important; /* 创建堆叠上下文 */ background-color: rgba(255, 255, 255, 0.05) !important; backdrop-filter: brightness(1.2) contrast(1.1) blur(1px) !important; border: none !important; outline: none !important; border-radius: 28px !important; box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.7), inset 1px 0 1px rgba(0, 255, 255, 0.6), inset -1px 0 1px rgba(255, 0, 255, 0.6) !important; /* 合并后的动画效果 */ transition: all 0.4s cubic-bezier(0.1, 0.9, 0.2, 1) !important; } .b_searchboxForm::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient( 200deg, rgba(216, 52, 67, 0.6), rgba(194, 24, 91, 0.6), rgba(106, 27, 154, 0.5), rgba(40, 51, 147, 0.6) ) !important; border-radius: 28px; z-index: -1; opacity: 0; transition: opacity 1s cubic-bezier(0.1, 0.9, 0.2, 1) !important; } /* --- 交互状态:悬停、点击、建议框出现 --- */ .b_searchboxForm:hover { box-shadow: inset 0 2.5px 2px rgba(255, 255, 255, 0.8), inset 2px 0 2px rgba(0, 255, 255, 0.7), inset -2px 0 2px rgba(255, 0, 255, 0.7) !important; } .b_searchboxForm:focus-within.as_show::before { opacity: 1 !important; } /* --- 输入框文字 --- */ .b_searchboxForm .b_searchbox { background: transparent !important; color: #FFFFFF !important; } /* --- 置顶状态下的样式覆盖 --- */ #b_header[style="top: 0px;"] .b_searchboxForm { background-color: rgba(30, 30, 30, 0.4) !important; backdrop-filter: blur(25px) saturate(120%) !important; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25), inset 1px 0 1px rgba(0, 255, 255, 0.6), inset -1px 0 1px rgba(255, 0, 255, 0.6) !important; } #b_header[style="top: 0px;"] .b_searchboxForm:hover { background-color: rgba(45, 45, 45, 0.75) !important; backdrop-filter: blur(18px) saturate(120%) !important; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), inset 2px 0 2px rgba(0, 255, 255, 0.7), inset -2px 0 2px rgba(255, 0, 255, 0.7) !important; } /* --- 3. 建议框相关样式 --- */ .b_searchboxForm.as_show { background: transparent !important; backdrop-filter: none !important; transition-duration: 0s !important; } #b_header[style="top: 0px;"] .b_searchboxForm.as_show { background-color: rgba(20, 20, 20, 0.7) !important; backdrop-filter: none !important; transition-duration: 0s !important; } #sw_as, #sw_as #sa_ul { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } #sw_as .sa_as { background-color: rgba(30, 30, 30, 0.55) !important; backdrop-filter: blur(25px) saturate(120%) !important; border-radius: 20px !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important; margin-top: 8px !important; padding: 10px !important; } #sw_as .sa_sg { background: transparent !important; border-radius: 12px !important; padding: 2px 4px !important; transition: background-color 0.15s ease-out !important; } #sw_as .sa_sg.sa_hv { background: rgba(255, 255, 255, 0.15) !important; } #sw_as .sa_tm, #sw_as .sa_tmHS { color: #EAEAEA !important; } #sw_as .sa_sg.sa_hv .sa_tm, #sw_as .sa_sg.sa_hv .sa_tmHS { color: #FFFFFF !important; } #sw_as .sa_tm strong { color: #FFFFFF !important; } #as_foot { background: transparent !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; padding-top: 8px !important; margin-top: 4px !important; } #as_foot a { color: #C0C0C0 !important; transition: color 0.2s ease !important; } #as_foot a:hover { color: #FFFFFF !important; background: none !important; } /* --- 4. 右侧悬浮卡片样式 --- */ .richrsrailsuggestion a, .b_rrsr .b_vList.b_divsec li a { display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 380px !important; background: rgba(55, 55, 60, 0.5) !important; backdrop-filter: blur(14px) !important; border: 0px solid transparent !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important; border-radius: 12px !important; padding: 10px 14px !important; transition: all 0.3s cubic-bezier(0.1, 0.9, 0.2, 1) !important; color: #EAEAEA !important; text-decoration: none; } .richrsrailsuggestion a:hover, .b_rrsr .b_vList.b_divsec li a:hover { transform: translateY(-5px) scale(1.05) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important; background: rgba(70, 70, 75, 0.7) !important; border-color: rgba(255, 255, 255, 0) !important; color: #FFFFFF !important; } .richrsrailsuggestion_text { margin: 0 8px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .richrsrailwrapper, #b_context > li.b_ans, .richrsrailsuggestion { background: transparent !important; border: none !important; padding: 0 !important; margin-bottom: 12px !important; transition: none !important; } .richrsrailtitle h2 { color: #EAEAEA !important; font-weight: 600 !important; padding-left: 5px !important; padding-bottom: 15px !important; } .b_ans .b_vList.b_divsec li a { /* 为悬停动画添加过渡效果 */ transition: background-color 0.2s ease-out !important; padding: 4px 8px !important; border-radius: 8px !important; } .b_ans .b_vList.b_divsec li a:hover { background: rgba(255, 255, 255, 0.1) !important; } /* --- 5. 全局卡片样式 --- */ #b_content #b_results > li.b_algo, #b_content #b_results > li.b_ans, .b_msg, .ca_main, .b_canvas { background-color: rgba(30, 30, 30, 0.5) !important; backdrop-filter: blur(20px) saturate(120%) !important; border: 1px solid rgba(255, 255, 255, 0) !important; border-radius: 16px !important; padding: 16px !important; margin-bottom: 20px !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important; transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; } #b_content #b_results > li.b_algo:hover, #b_content #b_results > li.b_ans:hover, .b_msg:hover, .b_canvas:hover, .sp-separator.AC, .ent-dtab-btn-new { transform: translateY(-5px) !important; background-color: rgba(40, 40, 40, 0.7) !important; border-color: rgba(255, 255, 255, 0) !important; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4) !important; } /* --- 6. 修复元素的纯色背景问题 --- */ .gs_h.gs_caphead, .gs_cit_wrapper, .cit_exp_cont, .gs_iv_link, .b_rc_gb_sub_cell, .btitle.b_title, .mc_vtvc, .b_imagePair.wide_wideAlgo, .slide, .iacfm.iacfic.mmkiaacf.iacfca { background: transparent !important; } .b_vList.b_divsec li, .b_vList.b_divsec li a, .b_vList.b_divsec li:hover, .b_vList.b_divsec li a:hover, .b_wpTabsWrapper, .ent-dtab-content, .ent-dtab-style-content.ent-dtab-curr-content,.b_wpt_chat *,.b_wpt_bg *,.b_wpt_bg, #xmonwrapper, .tab-menu.tab-flex ul li, .tab-menu.tab-hasnav ul li{ background: transparent !important; } /* --- 7. 移除边框 --- */ .mc_vtvc_th.b_canvas, .mc_vtvc_htc, .ca_main,.sydwrap_wrapper { border: none !important; box-shadow: none !important; } /* --- 8. AI回答 --- */ .ca_main { width: 100% !important; } .ca_main .b_canvas { background: transparent !important; backdrop-filter: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; } .b_gwaText:has(a) { display: flex !important; } .b_gwaText a { flex-grow: 1 !important; } /*--- 9. 搜索结果中相关搜索 ---*/ .b_ans #brsv3 .b_vList.b_divsec { display: flex !important; flex-wrap: wrap !important; gap: 16px !important; } .b_ans #brsv3 .b_vList.b_divsec > li { min-width: 300px !important; width: auto !important; } /*--- 10. 维护 ---*/ .b_vList.b_divsec *, .sydwrap_wrapper* { background: transparent !important; } .mc_vtvc_th.b_canvas *, .mc_vtvc_htc * { border: none !important; box-shadow: none !important; } }老哥,用你最新的 css 样式在必应学术页面透明度似乎有点问题,该怎么解决呀,谢谢
![]()
修好了,在上面更新了,你看看。
看起来很不错,怎么能mark一下呢
