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

如何解决Border-Shadow 和减少 cytoscape 中父元素 css 的大小

我有以下图片：

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

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

解决方法

减小父尺寸：

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

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

边框阴影

这有点棘手，cytoscape.js 只提供了一个普通的边框（比如 "border": "1px solid black"）。您可以使用这些样式：

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

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

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

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

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

这是应用了两项更改的有效 stackblitz。