BoxShadowValue 对象类型

BoxShadowValue 对象由 boxShadow 样式 prop 获取。它由 2-4 个长度、一个可选颜色和一个可选 inset 布尔值组成。这些值共同定义框阴影的颜色、位置、大小和模糊度。

¥The BoxShadowValue object is taken by the boxShadow style prop. It is comprised of 2-4 lengths, an optional color, and an optional inset boolean. These values collectively define the box shadow's color, position, size, and blurriness.

示例

¥Example

js

{
  offsetX: 10,
  offsetY: -3,
  blurRadius: '15px',
  spreadDistance: '10px',
  color: 'red',
  inset: true,
}

键和值

¥Keys and values

offsetX

x 轴上的偏移量。这可以是正数或负数。正值表示右，负值表示左。

¥The offset on the x-axis. This can be positive or negative. A positive value indicates right and negative indicates left.

类型	可选的
数字 | 字符串	不

offsetY

y 轴上的偏移量。这可以是正数或负数。正值表示上，负值表示下。

¥The offset on the y-axis. This can be positive or negative. A positive value indicates up and negative indicates down.

类型	可选的
数字 | 字符串	不

blurRadius

表示 高斯模糊 算法中使用的半径。值越大，阴影越模糊。只有非负值才有效。默认值为 0。

¥Represents the radius used in the Guassian blur algorithm. The larger the value the blurrier the shadow is. Only non-negative values are valid. The default is 0.

类型	可选的
数字 | 字符串	是的

spreadDistance

阴影变大或变小的程度。正值将增大阴影，负值将缩小阴影。

¥How much larger or smaller the shadow grows or shrinks. A positive value will grow the shadow, a negative value will shrink the shadow.

类型	可选的
数字 | 字符串	是的

color

阴影的颜色。默认为 black。

¥The color of the shadow. The default is black.

类型	可选的
color	是的

inset

阴影是否嵌入。插入阴影将出现在元素边框内部而不是外部。

¥Whether the shadow is inset or not. Inset shadows will appear around the inside of the element's border box as opposed to the outside.

类型	可选的
boolean	是的

使用者

¥Used by

• boxShadow