内联 CSS 样式

使用 style 属性设置内联样式，支持 JSX 对象、HTML 字符串两种语法。

样式的属性名使用驼峰命名法。

<div style={{ color: 'blue', fontSize: '20px' }}>Hello imgrender</div>

应直接在标签中定义样式，不能先定义样式对象再引用

以下写法是不支持的

const style = {
  color: 'red',
  fontSize: '20px',
}
<div style={style}>Hello, imgrender</div>

样式值都将使用标准 CSS 属性值对 - property: value 表示。多个属性之间使用 ; 连接。

<div style="color: red; font-size: 20px">Hello imgrender</div>

Tailwind CSS

imgrender 内置了 Tailwind CSS 语法解析能力，你可以通过 tw 属性为元素设置 TailwindCSS 类名来控制元素样式。

样式对应的 TailwindCSS 类名请参考 TailwindCSS 官方文档。

<div tw="text-red text-[20px]">Hello imgrender</div>

<div tw="text-[#50d71e]">Hello imgrender</div>

指定使用通用的衬线字体：

<div tw="font-serif">Hello imgrender</div>

指定使用 Roboto 字体：

<div tw="font-[Roboto]">Hello imgrender</div>

请参考 TailwindCSS - font-family 文档获取更多有关字体的设置方法。
参考文字排版与字体了解 imgrender 支持的字体。

支持的样式

Property	Property Expanded	Supported Values
`display`		`none`, `flex`, `inline-flex`, `grid`, `inline-grid`, `block`, `inline-block`, `inline`
`position`		`relative`, `absolute`
`direction`		Supported
`float`		Supported
`clear`		Supported
`zIndex`		Supported
`width`		Supported
`height`		Supported
`maxWidth`		Supported
`maxHeight`		Supported
`minWidth`		Supported
`minHeight`		Supported
`aspectRatio`		Supported
`animation`	`animationName`	Supported
	`animationDuration`	Supported
	`animationDelay`	Supported
	`animationTimingFunction`	`linear`, `ease`, `ease-in`, `ease-out`, `ease-in-out`, `step-start`, `step-end`, `steps()`, `cubic-bezier()`
	`animationIterationCount`	Supported
	`animationDirection`	Supported
	`animationFillMode`	Supported
	`animationPlayState`	Supported
`padding`	`paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft`, `paddingInline`, `paddingBlock`	Supported
`margin`	`marginTop`, `marginRight`, `marginBottom`, `marginLeft`, `marginInline`, `marginBlock`	Supported
`inset`	`top`, `right`, `bottom`, `left`, `insetInline`, `insetBlock`	Supported
`border`	`borderWidth` (`borderTopWidth`, `borderRightWidth`, `borderBottomWidth`, `borderLeftWidth`, `borderInlineWidth`, `borderBlockWidth`)	Supported
	`borderStyle`	`solid`, `none`
	`borderColor`	Supported
`borderRadius`	`borderTopLeftRadius`, `borderTopRightRadius`, `borderBottomRightRadius`, `borderBottomLeftRadius`	Supported
`outline`	`outlineWidth`	Supported
	`outlineStyle`	`solid`, `none`
	`outlineColor`	Supported
	`outlineOffset`	Supported
`flex`	`flexBasis`	Supported
	`flexGrow`	Supported
	`flexShrink`	Supported
`order`		Supported
Flexbox	`flexDirection`	Supported
	`flexFlow`	Supported
	`justifyContent`	Supported
	`justifySelf`	Supported
	`alignContent`	Supported
	`placeContent`	Supported
	`justifyItems`	Supported
	`alignItems`	Supported
	`placeItems`	Supported
	`alignSelf`	Supported
	`placeSelf`	Supported
	`flexWrap`	`nowrap`, `wrap`, `wrap-reverse`
	`gap` (`columnGap`, `rowGap`)	Supported
`objectFit`		Supported
`objectPosition`		Supported
`overflow`	`overflowX`, `overflowY`	`visible`, `clip`, `hidden`
`background`	`backgroundImage`	`linear-gradient()`, `radial-gradient()`, `conic-gradient()`, `repeating-linear-gradient()`, `repeating-radial-gradient()`, `repeating-conic-gradient()`, `url()`
	`backgroundPosition`	Supported
	`backgroundSize`	Supported
	`backgroundRepeat`	Supported
	`backgroundColor`	Supported
	`backgroundClip`	Supported
	`backgroundBlendMode`	Supported
`boxShadow`		Supported
Clip	`clipPath`	`<basic-shape>`
Clip	`clipRule`	Supported
`mask`	`maskImage`	Supported
	`maskSize`	Supported
	`maskPosition`	Supported
	`maskRepeat`	Supported
`transform`	`translate` (`translateX`, `translateY`)	Only 2D is supported
	`rotate`
	`scale` (`scaleX`, `scaleY`)
`transformOrigin`		Supported
Grid	`gridAutoColumns`	Supported
	`gridAutoRows`	Supported
	`gridAutoFlow`	Supported
	`gridColumn` (`gridColumnStart`, `gridColumnEnd`)	Supported
	`gridRow` (`gridRowStart`, `gridRowEnd`)	Supported
	`gridArea` (`gridRowStart`, `gridColumnStart`, `gridRowEnd`, `gridColumnEnd`)	Supported
	`gridTemplateColumns`	Supported
	`gridTemplateRows`	Supported
	`gridTemplateAreas`	Supported
Typography	`textOverflow`	`ellipsis`, `clip`, custom character
	`textTransform`	`none`, `uppercase`, `lowercase`, `capitalize`
	`fontStyle`	Supported
	`color`	Supported
	`textShadow`	Supported
	`fontSize`	Supported
	`fontFamily`	Font fallback supported
	`lineHeight`	Supported
	`verticalAlign`	Supported
	`fontWeight`	Supported
	`fontStretch`	Supported
	`fontVariationSettings`	Supported
	`fontFeatureSettings`	Supported
	`fontSynthesis`	`none`, `weight`, `style`
	`fontSynthesisWeight`	`auto`, `none`
	`fontSynthesisStyle`	`auto`, `none`
	`lineClamp`	number, `1 "ellipsis character"`
	`textAlign`	Supported
	`letterSpacing`	Supported
	`wordSpacing`	Supported
	`overflowWrap`	Supported
	`wordBreak`	`normal`, `break-all`, `keep-all`, `break-word`
	`whiteSpace`	`normal`, `pre`, `pre-wrap`, `pre-line`, `<text-wrap-mode> <white-space-collapse>`
	`whiteSpaceCollapse`	`preserve`, `collapse`, `preserve-spaces`, `preserve-breaks`
`textWrap`	`textWrapMode`	`wrap`, `nowrap`
`textWrap`	`textWrapStyle`	`auto`, `balance`, `pretty`
`boxSizing`		Supported
`opacity`		Supported
`imageRendering`		`auto`, `smooth`, `pixelated`
`filter`		`<filter-function>`
`backdropFilter`		`<filter-function>`
`WebkitTextStroke`	`WebkitTextStrokeWidth`, `WebkitTextStrokeColor`, `WebkitTextFillColor`	Supported
`strokeLinejoin`		`miter`, `round`, `bevel`
`textDecoration`	`textDecorationLine`	`underline`, `line-through`, `overline`
	`textDecorationStyle`	`solid`
	`textDecorationColor`	Supported
	`textDecorationThickness`	Supported
`textDecorationSkipInk`		`auto`, `none`
`isolation`		Supported
`mixBlendMode`		Supported
`visibility`		`visible`, `hidden`

样式

内联 CSS 样式

Tailwind CSS

支持的样式

On this page