Border-Shadow 并减小 cytoscape 中父元素的大小 css

Question

我有如下图片：

我正在尝试为矩形形状添加边框阴影。这在细胞景观中可能吗？此外，父元素是 Customers 和 order。我可以减小客户的大小并订购父元素吗？

这是代码和工作示例的 link： https://stackblitz.com/edit/angular-kpnys1?file=src%2Fapp%2Fdemo_test.json

Answer 1

减小父大小：

这是一个样式问题，cytoscape.js 将填充应用到父元素，如果您希望父元素尽可能小，则必须调整 :parent 样式中的填充：

{
    selector: ":parent",
    css: {
        ...
        "padding": "0px"  \ remove padding completely, parent almost touching inner nodes
    }
},

边框阴影

这有点棘手，cytoscape.js 只提供了一个正常的边框（如“边框”：“1px 纯黑色”）。您可以使用这些样式：

• border-width : 节点边框的大小。
• border-style : 节点边框样式；可以是实线、点线、虚线或双线。
• border-color : 节点边框的颜色。
• border-opacity : 节点边框的不透明度。

None 这为我们提供了应用单边边框的能力。作为替代方案，我使用了 ghost 样式：

• ghost : 是否使用幻影效果；可能是也可能不是。
• ghost-offset-x : 用于定位重影效果的水平偏移量。
• ghost-offset-y : 用于定位重影效果的垂直偏移量。
• ghost-opacity : 幻影效果的不透明度。

如果稍微调整一下，可以使用 x 偏移量和一个不错的不透明度值来实现此框阴影：

ghost: "yes",
"ghost-opacity": 0.5,
"ghost-offset-x": 1

这是应用了两项更改的工作 stackblitz。