译文样式

在设置里打开网页翻译 → 翻译显示样式，改动会实时显示在预览里。

预设样式

样式	效果
无	普通文字，和原文一样
文字颜色	译文用强调色显示（默认）
背景	译文后面有浅色底
弱化	译文比原文颜色浅
模糊效果	鼠标移上去才清晰，方便自测
引用	左侧一条竖线，像引用
虚线	译文下面有虚线
边框	译文外面有一圈细框

自定义 CSS

打开使用自定义 CSS 样式，在编辑器里写 CSS。译文元素带有属性 data-read-frog-custom-translation-style="custom"，所以规则以这个选择器开头：

[data-read-frog-custom-translation-style='custom'] {
  color: #414535;
  background-color: light-dark(#f2e3bc, #c19875);
  padding: 2px 4px;
  border-radius: 4px;
}

编辑器会边写边检查 CSS，点保存生效。任何 CSS 都可以用，包括字体、过渡和动画。

几个例子

译文先模糊，鼠标移上去才显示：

[data-read-frog-custom-translation-style='custom'] {
  filter: blur(5px);
  transition: filter 0.2s;
}

[data-read-frog-custom-translation-style='custom']:hover {
  filter: none;
}

利用译文带的 lang 属性，给某种语言换字体：

[data-read-frog-custom-translation-style='custom']:lang(ja) {
  font-family: "Hiragino Mincho ProN", serif;
}

light-dark() 在浅色页面用第一个颜色，在深色页面用第二个，一条规则就能兼顾两种页面。