用clip-path inset属性实现圆角矩形渐变边框

马黑黑 · 发表于 2022-5-10 07:29

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

先上代码：

<style>
.bgBox {
   margin: auto;
   padding: 8px;
   width: 740px;
   min-height: 400px;
   border: 10px solid;
   border-image: linear-gradient(45deg, green, red, magenta, olive) 1;
   clip-path: inset(0 round 10px);
}
</style>

<div class="bgBox">

代码解释：

主要是用了 clip-path 的 inset 属性，inset 裁剪出的是一个矩形，它可传入5个参数，前四个参数分别对应于 top、right、bottom 、left 的位置，第五个参数表示角的形状，默认直角，使用 round + radius 值表示圆角（可选，省略 round 时默认直角）。举例如下：

clip-path: inset(20px 30px 10px 40px);

这是剪出一个直角矩形，在原盒子基础上，上边从20px处即从上往下的第20个像素处下剪刀，右边从右往左第30px处开剪，下边从底部往上第10个像素剪起，左边从左到右的第40个像素处剪裁。

在上面基础上，如果加入第五个参数，即 round，写成 round 10px ，整句代码是：

clip-path: inset(20px 30px 10px 40px round 10px);

则剪出的矩形是圆角的。

而本例中，我们使用了不同的 inset 写法：

clip-path: inset(0 round 10px);

0 代表将剪出的矩形覆盖整个盒子区域，具体意思是分别从上、右、下、左的四个边的第 0px 处开始裁剪，然后 round 10px 参数则定义所裁剪的矩形的角是 10px 的圆角。

这样，圆角矩形的边框渐变效果实现了。但遗憾的是，使用 clip-path 的 inset 属性剪裁不出边框拥有渐变色的圆形对象，只能是圆角矩形。