如何使用 CSS 创建渐变和圆角边框？

问题描述 投票：0回答：1

我想创建一个渐变和圆形边框，如下所示，来自 Instagram 的顶部栏。

我知道如何创建圆形和实心边框，但这个是渐变的。

Instagram 似乎使用了 

canvas
，但是我可以使用 CSS 来实现吗？

如果不会，canvas也可以，请教我。

谢谢！

html css frontend
1个回答
0
投票

可以嵌套两个元素，让外面的div作为渐变边框，就可以解决这个问题，例如：

.gradient-box {
    background: linear-gradient(red, black);
    box-sizing: border-box;
    padding: 4px;
    border-radius: 4px;
    overflow: hidden;
}

.content-box {
    background: white;
    padding: 10px;
    border-radius: 2px;
    box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div class="gradient-box">
        <div class="content-box">
            Gradient Border
        </div>
    </div>
</body>

</html>

通过增加 .gradient-box 的填充来调整边框大小。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.