请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
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 属性剪裁不出边框拥有渐变色的圆形对象,只能是圆角矩形。
|