Skip to content

innerShadow

元素的内阴影。

关键属性

innerShadow: ShadowEffect | ShadowEffect[]

内阴影, 支持多个内阴影叠加。

ts
interface ShadowEffect {
  x: number
  y: number
  blur: number
  spread?: number
  color: Color
  blendMode?: BlendMode
  visible?: boolean
  scaleFixed?: 'zoom-in'false // 缩放时是否固定原有比例,zoom-in表示仅在放大时固定比例(缩小时仍跟随缩小)
}

归属

UI 元素

示例

绘制内阴影

ts
// #内阴影
import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const rect = new Rect({
    width: 100,
    height: 100,
    cornerRadius: 30,
    fill: '#32cd79',
    innerShadow: {
        x: 10,
        y: 5,
        blur: 20,
        color: '#FF0000AA'
    }
})

leafer.add(rect)

Released under the MIT License.