用clip-path inset属性实现圆角矩形渐变边框
<style>.bgDiv {
margin: auto;
padding: 8px;
width: 720px;
min-height: 400px;
border: 10px solid;
border-image: linear-gradient(45deg, green, red, magenta, olive) 1;
clip-path: inset(0 round 10px);
}
.bgDiv p { margin: 0; padding: 8px 0; }
</style>
<div class="bgDiv">
<p>先上代码：</p>
<pre><style>
<span style="color: red;">.bgBox </span>{
<span style="color: blue;">margin</span>: auto;
<span style="color: blue;">padding</span>: 8px;
<span style="color: blue;">width</span>: 740px;
<span style="color: blue;">min-height</span>: 400px;
<span style="color: blue;">border</span>: 10px solid;
<span style="color: blue;">border-image</span>: linear-gradient(45deg, green, red, magenta, olive) 1;
<span style="color: blue;">clip-path</span>: inset(0 round 10px);
}
</style>
<<span style="color:darkred">div</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"bgBox"</span>>
</pre>
<h2>代码解释：</h2>
<p>主要是用了 clip-path 的 inset 属性，inset 裁剪出的是一个矩形，它可传入5个参数，前四个参数分别对应于 top、right、bottom 、left 的位置，第五个参数表示角的形状，默认直角，使用 round + radius 值表示圆角（可选，省略 round 时默认直角）。举例如下：</p>
<p><span style="color: blue;">clip-path</span>: inset(20px 30px 10px 40px);</p>
<p>这是剪出一个直角矩形，在原盒子基础上，上边从20px处即从上往下的第20个像素处下剪刀，右边从右往左第30px处开剪，下边从底部往上第10个像素剪起，左边从左到右的第40个像素处剪裁。</p>
<p>在上面基础上，如果加入第五个参数，即 round，写成 round 10px ，整句代码是：</p>
<p><span style="color: blue;">clip-path</span>: inset(20px 30px 10px 40px round 10px);</p>
<p>则剪出的矩形是圆角的。</p>
<p>而本例中，我们使用了不同的 inset 写法：</p>
<p><span style="color: blue;">clip-path</span>: inset(0 round 10px);</p>
<p>0 代表将剪出的矩形覆盖整个盒子区域，具体意思是分别从上、右、下、左的四个边的第 0px 处开始裁剪，然后 round 10px 参数则定义所裁剪的矩形的角是 10px 的圆角。</p>
<p>这样，圆角矩形的边框渐变效果实现了。但遗憾的是，使用 clip-path 的 inset 属性剪裁不出边框拥有渐变色的圆形对象，只能是圆角矩形。</p>
</div>
这个讲得真详细，也就是说前四个数字用一个，就是四边裁一样的。
这个变色边框的配色真漂亮，现在又加上了圆角，更漂亮了{:4_187:} 记得关于clip-path你讲过很多，应该有圆和椭圆的弄法，现在又多了矩形的，真好。 上下左右都是0 那就是不裁剪，只是用这个功能加个圆角。真聪明的做法{:4_199:} 学习一下裁矩形
<style>
.hy {
margin: auto;
width: 272px;
height: 449px;
background:#666 url('https://www.huachaowang.com/data/attachment/forum/201711/19/142453t7u7xx5hz85lpdud.jpg');
clip-path: inset(40px round 20px);
}
</style>
<div class="hy"></div>
<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">
<div class="pic"><img src="https://pic.imgdb.cn/item/62789aef09475431295a2b19.jpg"></div>
</div> 真的很漂亮，有这个边框一下就增色不少哦。 加林森 发表于 2022-5-10 12:09
真的很漂亮，有这个边框一下就增色不少哦。
渐变的都是有吸引力的 马黑黑 发表于 2022-5-10 12:14
渐变的都是有吸引力的
就是。
页:
[1]