Question

我需要带有下图的渐变的边界半径。我尝试了几种方法，但没有得到所需的输出。

Answer 1

可能这是'Possible to use border-radius together with a border-image which has a gradient?'中的重复项，并且那里几乎没有使用完整的技巧。我如何找到解决问题的简单方法from git hub，但是并不能完全解决问题，因为我们无法通过此CSS技巧使背景透明，但只能使背景稳定您想要的颜色或渐变。这里的问题在上述问题的答案之一中得到了解释。据此，由于渐变效果作为CSS中的border-image属性应用，因此我们无法获得具有边界半径和渐变的透明背景。请参考该问题并查看已接受的答案。顺便说一下，这是承诺的棘手解决方案。

body{
    padding: 10%;
    box-sizing: border-box;
}
.border-container{
    display: flex;
    width: 100%;
    height: 200px; /* to set the div visible, since without height it won't display if it does not have any elements inside */
    border: double 4px transparent;
    border-radius: 25px;
    background-image: linear-gradient(#fff,#fff ), radial-gradient(circle at top left, #ef1eef,#163ae0);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

<body>
    <div class="border-container">
        <!-- your elemnts -->
    </div>
</body>

如何为容器内的内容添加带有渐变和透明背景的边框半径

1 个答案: