优雅的渐变边框

马黑黑

优雅的渐变边框

实现原理：利用 background-clip|origin|image 相配合，辅以边框、线性渐变等属性设定，产生单元素盒子渐变边框效果。代码：

<style>

.myBox {
   margin: auto;
   padding: 8px;
   width: 740px;
   min-height: 300px;
   border: 4px solid transparent;
   border-radius: 10px;
   background-clip: padding-box, border-box;
   background-origin: padding-box, border-box;
   background-image: linear-gradient(to right, #fff, #eee),
      linear-gradient(90deg, #f05654, #9ed900,#426666, #3eede7, #845a33);
}

</style>

<div class="myBox"></div>

在 background-clip|origin|image 中，都是两两赋值，前一组值针对针对元素里边的区域，后一组值针对边框，其中，边框渐变颜色可以极简到两个颜色参与渐变，也可以是多个。

PS：CSS3有一个 border-image 属性，支持渐变背景，但若使用了 border-image 属性，border-radius 将失效，圆角边框无法实现。

加林森

漂亮的渐变边框，制作得真漂亮！老黑真厉害！

马黑黑

加林森 发表于 2022-5-3 11:27
漂亮的渐变边框，制作得真漂亮！老黑真厉害！

这个边框小辣椒应该喜欢

大猫咪

猫也非常喜欢  老黑真棒！ 马上学习，中午好！

马黑黑

大猫咪 发表于 2022-5-3 12:23
猫也非常喜欢  老黑真棒！ 马上学习，中午好！

加林森

马黑黑 发表于 2022-5-3 11:50
这个边框小辣椒应该喜欢

嗯嗯，她肯定喜欢的。

朵拉

优雅的渐变边框 有空学习

马黑黑

朵拉 发表于 2022-5-3 13:41
优雅的渐变边框 有空学习

马黑黑

加林森 发表于 2022-5-3 12:27
嗯嗯，她肯定喜欢的。

应该是

红影

真漂亮，黑黑跟变魔术似的，总能变出这么多漂亮的东西来

加林森

马黑黑 发表于 2022-5-3 14:04
应该是

嗯嗯。