使用css美化gradio界面

基本方法

在默认的前端页面中使用检查工具确定要修改的部分的选择器名称，然后在block_css中对其修改，并在启动网页时传入参数：with gr.Blocks(css=block_css, theme=my_theme) as demo:

禁止修改下拉框文字

input.border-none.svelte-c0u3f0 {pointer-events: none;
}

隐藏页脚的gradio标记

footer.svelte-1ax1toq {display: none !important;
}

表格样式修改

table {border: 3px solid gray !important;margin-left: 1px !important;
}td, th {border: 3px solid gray !important; padding-left: 5px !important;padding-right: 5px !important;font-size: 20px !important;
}

标题居中

h2 {text-align: center !important;
}

选择框均匀分布

.wrap.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt {justify-content: space-around !important;
}