如何实现边界淡化

【问题标题】：How to achieve a fading in border如何实现边界淡化
【发布时间】：2023-02-22 07:29:52
【问题描述】：

从下到上时，左右边框应该淡化，底部应该有正常边框，顶部边框应该没有。边界半径是必须的。如何实现？

【问题讨论】：

标签： javascript reactjs typescript next.js

【解决方案1】：

在border-image中设置linear-gradient。
根据您的需要编辑linear-gradient。

div {
            height: 300px;
            width: 200px;
            border-image-source: linear-gradient(rgb(240, 240, 245), red);
            border-image-slice: 1;
            border-style: solid;
            border-width: 2px;
        }

&lt;div&gt;&lt;/div&gt;

【讨论】：