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

Question

我有以下图片：

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

这是代码和工作示例的链接： 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 只提供了一个正常的边框（如“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，应用了这两项更改。