fix(site): 修复 WebKit 渲染下终端顶部控制栏直角溢出 Bug
- 根因分析:Chrome/Safari 等 WebKit 渲染引擎中,子元素的 backdrop-blur-sm 会穿透并破坏父容器 overflow-hidden 的圆角裁切,导致顶部 bg-slate-900 控制栏出现尖锐直角; - 修复方案:为顶部控制栏显式加上 rounded-t-2xl,为底部内容区显式加上 rounded-b-2xl,彻底解决直角与圆角混杂问题。
This commit is contained in:
1 parent
4e9d651c9a
commit
23d4e7e5f2
1 file changed
+3
-3
@@ -104,8 +104,8 @@ const copy = isEnglish
|
||||
|
||||
<!-- Pireel-style Premium Terminal Prompt Window -->
|
||||
<div class="mx-auto max-w-3xl rounded-2xl border border-slate-800 bg-slate-950 shadow-2xl overflow-hidden font-mono text-xs sm:text-sm">
|
||||
<!-- Top Window Bar -->
|
||||
<div class="flex items-center justify-between border-b border-slate-800/80 bg-slate-900/90 px-3.5 sm:px-4 py-2.5 backdrop-blur-sm select-none">
|
||||
<!-- Top Window Bar (Explicit rounded-t-2xl to prevent WebKit backdrop-blur overflow) -->
|
||||
<div class="flex items-center justify-between border-b border-slate-800/80 bg-slate-900/90 rounded-t-2xl px-3.5 sm:px-4 py-2.5 backdrop-blur-sm select-none">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex items-center gap-1.5 mr-1.5">
|
||||
<span class="h-2.5 w-2.5 rounded-full bg-[#ff5f57] inline-block opacity-80"></span>
|
||||
@@ -132,7 +132,7 @@ const copy = isEnglish
|
||||
</div>
|
||||
|
||||
<!-- Prompt Content Body with Pireel Code Typography & Highlighting -->
|
||||
<div class="p-4 sm:p-6 text-slate-200 leading-relaxed font-mono space-y-3 bg-slate-950/95 select-text">
|
||||
<div class="p-4 sm:p-6 text-slate-200 leading-relaxed font-mono space-y-3 bg-slate-950/95 rounded-b-2xl select-text">
|
||||
<p class="text-slate-400 font-semibold text-xs sm:text-sm">
|
||||
{isEnglish ? "Please complete EdgeEver deployment online:" : "请在线完成 EdgeEver 部署:"}
|
||||
</p>
|
||||
|
||||
Reference in new issue
Block a user