样式
使用内联 CSS 样式控制元素外观
imgrender 目前只支持内联 CSS 来控制样式：
imgrender 暂不支持使用 Style Sheets 来管理样式
内联 CSS 样式
使用 style 属性设置内联样式。属性名使用标准 CSS 的连字符写法（如 font-size），属性和值之间使用 :，多个属性之间使用 ; 连接。
<div style="color: red; font-size: 20px">Hello imgrender</div>支持的样式
下表列出支持的样式属性、取值及使用限制。
| 属性 | 展开属性 | 支持值 | 限制 |
|---|---|---|---|
display | none, flex, inline-flex, grid, inline-grid, block, inline-block, inline, flow-root, list-item, table, table-row, table-cell, table-header-group, table-row-group, table-footer-group, table-caption；表格支持固定列宽、标题及行组排序 | 列宽和标题间距可能与浏览器不同 | |
position | static, relative, absolute, fixed；static 不应用定位偏移，fixed 相对画布定位 | — | |
direction | ltr, rtl；支持继承、子级覆盖及文字起始对齐 | — | |
float | left, right, none | — | |
clear | left, both | none、right 可能仍将元素放在较高浮动块下方 | |
z-index | 支持 | — | |
width | 长度、auto, fit-content, stretch；block 支持百分比 | inline-block 的百分比宽度可能导致背景绘制过窄，min-content、max-content 的宽度可能不符合内容尺寸，建议使用显式长度 | |
height | 长度、百分比、auto, min-content, max-content, fit-content, stretch | — | |
max-width | 长度、百分比、auto、none；auto 与 none 均不限制上限 | 不支持 min-content、max-content、fit-content、stretch | |
max-height | 长度、百分比、auto、none；auto 与 none 均不限制上限 | 不支持 min-content、max-content、fit-content、stretch | |
min-width | 长度、百分比、auto | 不支持 min-content、max-content、fit-content、stretch | |
min-height | 长度、百分比、auto | 不支持 min-content、max-content、fit-content、stretch | |
aspect-ratio | 比例值，用于计算自动宽度或高度 | 同时指定宽高时，比例可能覆盖显式高度 | |
contain | none, style, layout, paint 及不重复的组合，content 等价于 layout style paint；layout 建立绝对定位包含块，paint 裁剪溢出 | 不支持 size、inline-size、strict | |
animation | animation-name | 支持 | — |
animation-duration | 支持 | — | |
animation-delay | 支持 | — | |
animation-timing-function | linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end, steps(), cubic-bezier() | — | |
animation-iteration-count | 支持 | — | |
animation-direction | 支持 | — | |
animation-fill-mode | 支持 | — | |
animation-play-state | 支持 | — | |
padding | padding-top, padding-right, padding-bottom, padding-left, padding-inline, padding-inline-start, padding-inline-end, padding-block | 支持 | — |
margin | margin-top, margin-right, margin-bottom, margin-left, margin-inline, margin-inline-start, margin-inline-end, margin-block | 支持 | — |
inset | top, right, bottom, left, inset-inline, inset-block | 支持 | RTL 下 inset-inline 不交换左右端，请使用 left、right |
border | border-width (border-top-width, border-right-width, border-bottom-width, border-left-width, border-inline-width, border-block-width) | 长度（含 0） | 可见边框可能使外盒尺寸不符合预期，请显式设置 box-sizing。RTL 下 border-inline-width 不交换左右端，请使用 border-left-width、border-right-width。空元素不绘制时，移除内部缩进空白 |
border-style | none, hidden, solid, dashed, dotted, double, groove, ridge, inset, outset；none 不绘制边框 | — | |
border-color | 支持 | — | |
border-radius | border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius | 支持 | — |
border-top, border-right, border-bottom, border-left | 单边宽度、样式与颜色的组合 | 请显式设置 box-sizing 以确定外盒尺寸 | |
border-top-style, border-right-style, border-bottom-style, border-left-style | none, hidden, solid, dashed, dotted, double, groove, ridge, inset, outset | — | |
border-top-color, border-right-color, border-bottom-color, border-left-color | 颜色值（含 transparent） | — | |
corner-shape | corner-top-left-shape, corner-top-right-shape, corner-bottom-left-shape, corner-bottom-right-shape | round, squircle, bevel, scoop, notch, square, superellipse(2), superellipse(0) | 需配合 border-radius |
outline | outline-width | 支持 | — |
outline-style | none, hidden, solid, dashed, dotted, double, groove, ridge, inset, outset；hidden 与 none 均不绘制轮廓 | — | |
outline-color | 支持 | — | |
outline-offset | 支持 | — | |
flex | flex-basis | 长度、百分比、content, auto, min-content, max-content, fit-content, stretch | — |
flex-grow | 支持 | — | |
flex-shrink | 支持 | — | |
order | 支持 | — | |
| Flexbox | flex-direction | row, row-reverse, column, column-reverse | — |
flex-flow | 支持 | — | |
flex-line-count | 1, 2, 3 | 配合 flex-wrap: balance 设置最小行数 | |
-webkit-box-orient | horizontal, vertical；分别对应 flex-direction: row、column | — | |
-webkit-box-pack | start, end, center, justify；分别对应 justify-content 的 flex-start, flex-end, center, space-between | — | |
-webkit-box-align | start, end, center, baseline, stretch；分别对应 align-items 的 flex-start, flex-end, center, baseline, stretch | — | |
justify-content | normal, stretch, start, end, flex-start, flex-end, center, space-between, space-around, space-evenly；支持 safe、unsafe | safe 不支持 normal、stretch 和空间分配值；溢出时 safe 回退至起始侧，unsafe 保持指定对齐 | |
justify-self | 网格布局：normal, baseline, stretch, start, end, flex-start, flex-end, self-start, self-end, center；支持 safe、unsafe | safe 不支持 normal、baseline、stretch；溢出时 safe 回退至起始侧，unsafe 保持指定对齐；不支持 auto | |
align-content | normal, stretch, start, end, flex-start, flex-end, center, space-between, space-around, space-evenly；支持 safe、unsafe | safe 不支持 normal、stretch 和空间分配值；溢出时 safe 回退至起始侧，unsafe 保持指定对齐 | |
place-content | center center | — | |
justify-items | 网格布局：normal, baseline, stretch, start, end, flex-start, flex-end, self-start, self-end, center；支持 safe、unsafe | safe 不支持 normal、baseline、stretch；溢出时 safe 回退至起始侧，unsafe 保持指定对齐 | |
align-items | 网格布局：normal, baseline, stretch, start, end, flex-start, flex-end, self-start, self-end, center；支持 safe、unsafe | safe 不支持 normal、baseline、stretch；溢出时 safe 回退至起始侧，unsafe 保持指定对齐 | |
place-items | 网格布局：center | — | |
align-self | 网格布局：normal, baseline, stretch, start, end, flex-start, flex-end, self-start, self-end, center；支持 safe、unsafe | safe 不支持 normal、baseline、stretch；溢出时 safe 回退至起始侧，unsafe 保持指定对齐；不支持 auto | |
place-self | 网格布局：end | — | |
flex-wrap | nowrap, wrap, wrap-reverse, balance, wrap balance, balance wrap, wrap-reverse balance, balance wrap-reverse；balance 可与 flex-line-count 组合，反向组合交换行的排列方向 | — | |
gap (column-gap, row-gap) | 支持 | — | |
object-fit | contain, cover, fill, none, scale-down | — | |
object-position | center, left top, right bottom, 50% 50% | — | |
caption-side | top, bottom；标题位于表格上方或下方 | 间距可能与浏览器不同 | |
border-collapse | separate, collapse；相邻边框分别独立显示或合并 | — | |
border-spacing | 单值或双值长度；双值分别设置横向、纵向间距 | — | |
table-layout | auto, fixed | 列宽和标题间距可能与浏览器不同 | |
overflow | overflow-x, overflow-y | visible, clip, hidden；clip 与 visible 可按独立轴裁剪 | hidden 与 visible 的分轴组合可能同时裁剪两轴 |
background | 颜色值 | 组合颜色、图片、位置、尺寸和重复方式时可能只显示底色，请分别使用下列长写属性 | |
| 背景长写属性 | background-image | linear-gradient(), radial-gradient(), conic-gradient(), repeating-linear-gradient(), repeating-radial-gradient(), repeating-conic-gradient(), url() | — |
background-position | left top, center, right bottom | — | |
background-origin | border-box, padding-box, content-box；控制背景图片定位原点 | — | |
background-size | contain, cover, auto；支持显式宽高，如 100px 50px | — | |
background-repeat | no-repeat, repeat, repeat-x, repeat-y | — | |
background-color | 支持 | — | |
background-clip | content-box, padding-box, border-box, text；text 配合透明文字填充显示字形内背景 | 裁剪范围受内边距、边框及盒模型影响，请显式设置 box-sizing；空元素不绘制时，移除内部缩进空白 | |
background-blend-mode | normal, multiply, screen | — | |
box-shadow | 支持 | — | |
| Clip | clip-path | circle(), inset(), polygon(), none | 不支持 ellipse(50px 30px at center) |
clip-rule | evenodd, nonzero；作用于 HTML 的 polygon()，分别可留洞或填满中心；也可使用 polygon(evenodd, ...) 指定形状自身规则 | — | |
mask | linear-gradient(to right, transparent, #000) | 组合图片、位置、尺寸和重复方式的简写不生效，请使用下列长写属性。空元素不绘制时，移除内部缩进空白 | |
| 蒙版长写属性 | mask-image | url(), linear-gradient(), none；配合 mask-position、mask-size、mask-repeat 设置图片蒙版 | 空元素不绘制时，移除内部缩进空白 |
mask-size | 支持显式宽高，如 100px 50px | — | |
mask-position | left top, center, right bottom | — | |
mask-repeat | no-repeat, repeat, repeat-x, repeat-y | — | |
transform | translate(), translateX(), translateY(), rotate(), scale(), scaleX(), scaleY(), matrix(), skewX(), skewY(), none；支持函数组合，顺序影响结果 | 仅支持二维变换。空元素不绘制时，移除内部缩进空白 | |
| 二维独立变换属性 | translate | 二维位移，如 40px 20px | 不支持 translate-x、translate-y，可使用 transform 的 translateX()、translateY()。空元素不绘制时，移除内部缩进空白 |
rotate | 支持二维旋转，如 90deg | 空元素不绘制时，移除内部缩进空白 | |
scale | 二维缩放，如 1.5 0.5 | 不支持 scale-x、scale-y，可使用 transform 的 scaleX()、scaleY()。空元素不绘制时，移除内部缩进空白 | |
transform-origin | center, 0 0, 100% 100% | — | |
offset | path("M 0 0 L 200 0") 50% 0deg, path("M 0 0 L 200 0") 50px auto | — | |
offset-path | 直线 path()、显式中心的 circle()、ellipse() 和 polygon() | ray()、inset()、border-box、content-box 的位置可能不符合预期；不支持 url() | |
offset-distance | 长度、百分比；百分比相对路径长度 | — | |
offset-rotate | auto, reverse, 0deg, 90deg, auto 30deg | — | |
offset-anchor | auto, 0 0, 100% 100% | 不支持 center | |
offset-position | normal, auto, 0 0, 50% 50% | — | |
| Grid | grid-auto-columns | 支持长度，如 80px | — |
grid-auto-rows | 支持长度，如 30px | — | |
grid-auto-flow | row, column, row dense | — | |
grid-column (grid-column-start, grid-column-end) | 支持数字网格线起止，如 2 / 4；支持跨度，如 2 / span 2 | — | |
grid-row (grid-row-start, grid-row-end) | 支持数字网格线起止，如 1 / 3 | — | |
grid-area (grid-row-start, grid-column-start, grid-row-end, grid-column-end) | 支持数字网格线形式，如 1 / 2 / 3 / 4 | 不支持命名区域 | |
grid-template-columns | 长度、fr、repeat() 和 minmax() 组合 | — | |
grid-template-rows | 长度列表和 repeat() | — | |
list-style | square inside, decimal outside | 图片组合简写可能不生效，请使用 list-style-image | |
list-style-type | none, decimal, decimal-leading-zero, lower-alpha, lower-latin, upper-alpha, upper-latin, lower-roman, upper-roman 和字符串 "X" | disc, circle, square 存在标记尺寸或首行占位差异 | |
list-style-position | inside, outside；分别让标记参与首行占位或位于内容区外 | — | |
list-style-image | url() 图片标记及 none；none 取消图片并恢复类型标记 | — | |
| Typography | text-overflow | ellipsis, clip | 自定义字符串不支持，按 clip 处理 |
text-transform | none, uppercase, lowercase, capitalize | — | |
font-style | 支持 | — | |
color | 支持 | — | |
text-shadow | 支持 | — | |
font-size | 支持 | — | |
font-family | 支持字体回退 | — | |
line-height | 支持长度和无单位倍数；支持换行后的行距，如 24px 字号配合 1.5 得到 36px 行距 | — | |
vertical-align | baseline, top, bottom, middle 和长度偏移 | — | |
font-weight | 支持 | — | |
font-stretch | 支持 | — | |
font-variation-settings | 支持 | — | |
font-feature-settings | 支持 | — | |
font-variant | normal, none, small-caps | 需字体具备相应 OpenType 特性，不合成缺失特性 | |
font-variant-ligatures | normal, none, common-ligatures, no-common-ligatures, discretionary-ligatures | 需字体具备相应 OpenType 特性，不合成缺失特性 | |
font-variant-numeric | normal, oldstyle-nums, proportional-nums, diagonal-fractions, ordinal, slashed-zero | 需字体具备相应 OpenType 特性，不合成缺失特性 | |
font-variant-east-asian | normal, jis83, jis90, full-width, proportional-width | 需字体具备相应 OpenType 特性，不合成缺失特性 | |
font-variant-caps | normal, small-caps, all-small-caps, petite-caps, all-petite-caps | 需字体具备相应 OpenType 特性，不合成缺失特性 | |
font-variant-position | normal, sub, super | 需字体具备相应 OpenType 特性，不合成缺失特性 | |
font-kerning | auto, normal, none | 需字体具备相应 OpenType 特性，不合成缺失特性 | |
font-synthesis | none, weight, style | 不支持 small-caps | |
font-synthesis-weight | auto, none | — | |
font-synthesis-style | auto, none | — | |
line-clamp | 数字 | 自定义截行标记按普通省略号处理，请使用 block-ellipsis 设置自定义标记 | |
max-lines | none, 1, 2, 3 | 与 continue: collapse 配合限制行数 | |
block-ellipsis | none（无标记）、auto（省略号）、"END"（显示 END） | 配合 max-lines 和 continue: collapse | |
continue | normal, collapse；保留后续内容或在 max-lines 处截断 | — | |
text-align | left, right, center, start, end, justify | — | |
text-indent | 长度、百分比（含负值）；仅缩进首行 | — | |
tab-size | 0, 2, 4, 8 | 保留制表符时，每个制表符展开为对应个数的空格，与浏览器的制表位对齐方式不同 | |
text-fit | none, grow, shrink；单行文本分别保持原字号、放大短文或缩小溢出长文以适配容器 | — | |
letter-spacing | 支持 | — | |
word-spacing | 支持 | — | |
overflow-wrap | normal, break-word, anywhere | — | |
word-break | normal, break-all, keep-all, break-word | — | |
white-space | normal, nowrap, pre, pre-wrap, pre-line, <text-wrap-mode> <white-space-collapse>；nowrap 禁止软换行、折叠连续空白，保留显式 br 换行 | — | |
white-space-collapse | preserve, collapse, preserve-spaces, preserve-breaks | — | |
text-wrap | text-wrap-mode | wrap, nowrap | — |
text-wrap-style | auto, balance, pretty | — | |
box-sizing | content-box, border-box | — | |
opacity | 支持 | — | |
image-rendering | auto, smooth, pixelated | — | |
filter | blur(), brightness(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(), drop-shadow(), none；支持函数组合 | 不支持 contrast()、url()（含局部片段和外部 SVG） | |
backdrop-filter | blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(), drop-shadow(), none 及函数组合；作用于覆盖区域后方的内容 | 不支持 url()（含局部片段和外部 SVG） | |
-webkit-text-stroke | -webkit-text-stroke-width, -webkit-text-stroke-color, -webkit-text-fill-color | 支持 | — |
stroke-linejoin | miter, round, bevel | — | |
text-decoration | text-decoration-line | underline, line-through, overline, underline overline | 顶线需留足行高以免被裁剪，如 48px 字号使用 line-height: 72px |
text-decoration-style | solid, double, dotted, dashed, wavy | 双线需留足行高，如 48px 字号使用 line-height: 72px，并显式设置 text-decoration-thickness | |
text-decoration-color | 支持 | — | |
text-decoration-thickness | 支持 | — | |
text-decoration-skip-ink | auto, none | — | |
text-underline-offset | auto, 0, 8px, 20%；百分比相对字号 | — | |
text-underline-position | auto, from-font, under | — | |
isolation | auto, isolate | — | |
mix-blend-mode | normal, multiply, screen, darken, lighten, overlay, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity | — | |
visibility | visible, hidden | — | |