Reeden高亮规则
Reeden 高亮规则当前支持的 CSS 属性和值
高亮规则 CSS 概述
Reeden 的高亮规则支持部分 CSS 属性，用于控制命中文字的样式。
这些属性可以直接写在高亮规则的 CSS 输入框中，未支持的属性会自动忽略。
使用方式
color: {primaryColor};
background-color: #FFF3C4;
font-weight: 700;
border-left: 4px solid {primaryColor};
padding: 4px 10px;当前支持的 CSS 属性
文字与装饰
| 属性 | 支持的值 | 示例 |
|---|---|---|
color | #FFB800 rgba(255,184,0,.8) {textColor} {primaryColor} | color: {primaryColor}; |
font-weight | normal 400 700 bold | font-weight: 700; |
font-style | normal italic | font-style: italic; |
font-size | 14px 1em 1.1rem | font-size: 14px; |
font-family | 字体名列表 | font-family: "Source Han Serif SC", serif; |
line-height | 1.5 24px | line-height: 1.5; |
text-align | left center right justify | text-align: center; |
text-decoration | 下划线组合表达式 | text-decoration: underline wavy {primaryColor}; |
text-decoration-line | underline | text-decoration-line: underline; |
text-decoration-style | solid wavy dashed dotted double | text-decoration-style: wavy; |
text-decoration-color | 颜色值 {primaryColor} | text-decoration-color: {primaryColor}; |
背景与图片
| 属性 | 支持的值 | 示例 |
|---|---|---|
background-color | #FFF3C4 {primaryColor} | background-color: #FFF3C4; |
background-image | url("reeden://bg/xxx") | background-image: url("reeden://bg/xxx"); |
background-position | left top center right bottom | background-position: center; |
background-repeat | no-repeat repeat | background-repeat: no-repeat; |
background-size | cover contain auto | background-size: cover; |
边框与圆角
| 属性 | 支持的值 | 示例 |
|---|---|---|
border | 1px solid #22C55E | border: 1px solid #22C55E; |
border-left | 4px solid #94A3B8 | border-left: 4px solid #94A3B8; |
border-right | 1px solid #CBD5E1 | border-right: 1px solid #CBD5E1; |
border-top | 1px solid #CBD5E1 | border-top: 1px solid #CBD5E1; |
border-bottom | 1px solid #CBD5E1 | border-bottom: 1px solid #CBD5E1; |
border-radius | 12px 999px | border-radius: 12px; |
内边距与外边距
| 属性 | 支持的值 | 示例 |
|---|---|---|
padding | 4px 10px | padding: 4px 10px; |
padding-left | 8px | padding-left: 8px; |
padding-right | 8px | padding-right: 8px; |
padding-top | 4px | padding-top: 4px; |
padding-bottom | 4px | padding-bottom: 4px; |
margin | 4px 8px | margin: 4px 8px; |
margin-left | 8px | margin-left: 8px; |
margin-right | 8px | margin-right: 8px; |
margin-top | 8px | margin-top: 8px; |
margin-bottom | 8px | margin-bottom: 8px; |
展示语义
| 属性 | 支持的值 | 示例 |
|---|---|---|
display | inline block | display: block; |
opacity | 0 到 1 | opacity: .85; |
动态颜色占位符
| 占位符 | 说明 | 示例 |
|---|---|---|
{textColor} | 当前主题文字色 | color: {textColor}; |
{primaryColor} | 当前主题强调色 | border-left: 4px solid {primaryColor}; |
注意事项
display: block更适合整段、连续整段或标题命中。margin-top和margin-bottom更适合块级命中场景。- 这页只列出当前支持的属性，未支持内容会自动忽略。