盒阴影¶

在 2.2.0 版本加入.

BoxShadow 是一种图形指令，用于为元素添加阴影效果。

其行为类似于CSS3盒阴影的概念。

BoxShadow 声明必须位于 Canvas 语句内部。它的工作方式与其他图形指令类似，如 Rectangle、RoundedRectangle 等。

备注

尽管``BoxShadow``图形指令在视觉上与CSS的box-shadow行为相似，但``BoxShadow``相对于目标元素的绘制图层层级必须遵循与其他画布指令声明时相同的图层层级规则。

更多细节，请参考 inset 模式。

示例：¶

<MyWidget>:
    Button:
        pos_hint: {"center_x": 0.5, "center_y": 0.5}
        size_hint: None, None
        size: 200, 150
        background_down: self.background_normal
        canvas.before:
            Color:
                rgba: 0, 0, 1, 0.85
            BoxShadow:
                pos: self.pos
                size: self.size
                offset: 0, -10
                spread_radius: -20, -20
                border_radius: 10, 10, 10, 10
                blur_radius: 80 if self.state == "normal" else 50

class kivy.graphics.boxshadow.BoxShadow(*args, **kwargs)¶

基类：InstructionGroup

在 2.2.0 版本加入.

在 2.3.0 版本发生变更: 修复了使用 add()、insert() 和 remove() 管理 Canvas 的问题。此前，使用这些方法管理 Canvas 没有任何效果。

基类也从 Fbo 更改为 InstructionGroup。

参数:

inset：布尔值，默认为 False。: 定义阴影是从内向外绘制，还是从轮廓向 BoxShadow 指令内部绘制。
size：列表 | 元组，默认为 (100.0, 100.0)。: 定义阴影的原始尺寸，即设置此参数时，不应考虑 blur_radius 和 spread_radius 属性值的变化。
pos：列表 | 元组，默认为 (0.0, 0.0)。: 定义阴影的原始位置，即设置此参数时，不应考虑 offset 属性值的变化。
offset：列表 | 元组，默认值为 (0.0, 0.0)。: 以 (水平, 垂直) 格式指定阴影偏移量。偏移量的正值表示阴影应向右和/或向上移动。负值表示阴影应向左和/或向下移动。
blur_radius：浮点数，默认值为 15.0。: 定义阴影模糊半径。控制阴影的扩展范围和柔和度。
spread_radius：列表或元组，默认为 (0.0, 0.0)。: 定义阴影的收缩/扩展。
border_radius：列表或元组，默认为 (0.0, 0.0, 0.0, 0.0)。: 指定用于圆角的半径，按顺时针方向依次为：左上、右上、右下、左下。

blur_radius¶

定义阴影模糊半径。控制阴影的扩展范围和柔和度。

默认为 15.0。

在下图中，阴影模糊效果长度的起始和结束位置已标示。颜色与透明度之间的过渡无缝衔接，尽管阴影看似在虚线矩形之前结束，但其末端已尽可能平滑处理。

inset 关闭：

inset 开启：

备注

在某些情况下（如果这不是你的本意），将元素放置在阴影之上（在模糊半径结束之前）会导致不必要的裁剪/覆盖行为，而非连续性，从而破坏阴影的柔和结尾，如下图所示。

border_radius¶

指定用于圆角的半径，按顺时针方向依次为：左上、右上、右下、左下。

默认为 (0.0, 0.0, 0.0, 0.0)。

inset 关闭：

inset 开启：

inset¶

定义阴影是从内向外绘制，还是从轮廓向 BoxShadow 指令内部绘制。

默认为 False。

备注

尽管内嵌模式决定了阴影的绘制行为，但``BoxShadow``指令在``canvas``层级中的位置取决于:class:`~kivy.graphics.instructions.Canvas`指令树中存在的其他图形指令。

换句话说，如果**目标**位于``canvas``层，并且你想使用默认的``inset = False``模式来创建凸起效果，则必须在``canvas.before``层中声明``BoxShadow``指令。

<MyWidget@Widget>:
    size_hint: None, None
    size: 100, 100
    pos: 100, 100

    canvas.before:
        # BoxShadow statements
        Color:
            rgba: 0, 0, 0, 0.65
        BoxShadow:
            pos: self.pos
            size: self.size
            offset: 0, -10
            blur_radius: 25
            spread_radius: -10, -10
            border_radius: 10, 10, 10, 10

    canvas:
        # target element statements
        Color:
            rgba: 1, 1, 1, 1
        Rectangle:
            pos: self.pos
            size: self.size

或者，如果目标位于``canvas``层中，并且您希望使用``inset = True``模式来创建插入效果，则必须在``canvas``层中，紧跟在**目标**``canvas``声明之后声明``BoxShadow``指令，或者在``canvas.after``中声明它。

<MyWidget@Widget>:
    size_hint: None, None
    size: 100, 100
    pos: 100, 100

    canvas:
        # target element statements
        Color:
            rgba: 1, 1, 1, 1
        Rectangle:
            pos: self.pos
            size: self.size

        # BoxShadow statements
        Color:
            rgba: 0, 0, 0, 0.65
        BoxShadow:
            inset: True
            pos: self.pos
            size: self.size
            offset: 0, -10
            blur_radius: 25
            spread_radius: -10, -10
            border_radius: 10, 10, 10, 10

总结：

高程效果 - inset = False：BoxShadow 指令需要在目标元素**之前**绘制。

插入效果 - inset = True：BoxShadow 指令需要在目标元素**之后**绘制。

一般来说，BoxShadow 比 CSS 的 box-shadow 更灵活，因为 inset = False 和 inset = True 模式分别不会限制阴影在目标元素下方和上方的绘制。实际上，您可以在 Canvas 声明树中定义任何所需的层级结构，以创建超越常见阴影效果的更复杂效果。

模式：

``False``（默认值）- 阴影在``BoxShadow``指令内部向外绘制，产生凸起效果。

True - 阴影从轮廓向内绘制于``BoxShadow``指令内部，产生内嵌效果。

offset¶

以 [水平, 垂直] 格式指定阴影偏移量。偏移量为正值表示阴影应向右和/或向上移动。负值表示阴影应向左和/或向下移动。

默认为 (0.0, 0.0)。

为使该属性按预期工作，建议 pos 的值与阴影目标元素的位置一致，如下例所示：

inset 关闭：

inset 开启：

pos¶

定义阴影的原始位置，即设置此属性时，不应考虑 offset 属性值的变化。

inset 关闭：
根据调整后的阴影 size 和 offset 属性，返回阴影的调整后位置。
inset 开启：
返回原始位置（与指定位置相同）。

默认为 (0.0, 0.0)。

备注

建议此属性与阴影目标元素的原始位置保持一致。如需调整水平和垂直偏移，请改用 offset 属性。

size¶

定义阴影的原始尺寸，即不应考虑 blur_radius 和 spread_radius 属性值的变化。

inset 关闭：
根据 blur_radius 和 spread_radius 属性返回调整后的阴影尺寸。
inset 开启：
返回原始尺寸（与指定值相同）。

默认为 (100.0, 100.0)。

备注

建议将该属性与阴影目标元素的原始尺寸保持一致。若要控制阴影原始 size 的收缩/扩展，请改用 spread_radius。

spread_radius¶

定义阴影在 [水平, 垂直] 格式中的收缩/扩展。

默认为 (0.0, 0.0)。

该属性在您希望通过为 spread_radius 设置负值并为 blur_radius 设置较大值来实现元素周围更柔和阴影的情况下特别有用，如示例中所示。

inset 关闭：
在下图中，目标元素的原始尺寸为 200 x 150px。对 spread_radius 值的正向调整会导致阴影的原始 size 增大，而负向值则会使阴影缩小。

inset 开启：
正值会使阴影向边界框内扩展，而负值则会使阴影收缩。

« 图形。

画布 »

Version

Quick search

目录

盒阴影¶

示例：¶