论坛 › 欢乐水吧 › 优雅的渐变边框

马黑黑 发表于 2022-5-3 11:14

优雅的渐变边框

<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);
        filter: drop-shadow(0 0 14px gray);
}
.myBox h2 { margin:0; padding 10px;font: bold 1.4em / 2em sans-serif; text-align: center; }
myBox p { font: normal 1em / 1.5em sans-serif; }
.myBox pre { font: normal 1em sans-serif; }
</style>

<div class="myBox">
<h2>优雅的渐变边框</h2>
<p>实现原理：利用 background-clip|origin|image 相配合，辅以边框、线性渐变等属性设定，产生单元素盒子渐变边框效果。代码：</p>
<pre>

&lt;style&gt;

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

&lt;/style&gt;

&lt;<span style='color:darkred'>div</span> <span style='color: red'>class</span><span style='color: blue'>=</span><span style='color: magenta'>"myBox"</span>&gt;&lt;<span style='color: darkred'>/div</span>&gt;

</pre>
<p>在 background-clip|origin|image 中，都是两两赋值，前一组值针对针对元素里边的区域，后一组值针对边框，其中，边框渐变颜色可以极简到两个颜色参与渐变，也可以是多个。</p>
<p>PS：CSS3有一个 border-image 属性，支持渐变背景，但若使用了 border-image 属性，border-radius 将失效，圆角边框无法实现。</p>
</div>

加林森 发表于 2022-5-3 11:27

漂亮的渐变边框，制作得真漂亮！老黑真厉害！{:4_199:}

马黑黑 发表于 2022-5-3 11:50

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

这个边框小辣椒应该喜欢{:5_117:}

大猫咪 发表于 2022-5-3 12:23

猫也非常喜欢{:4_204:}老黑真棒！{:4_191:} 马上学习，中午好！{:4_179:}

马黑黑 发表于 2022-5-3 12:25

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

{:4_191:}

加林森 发表于 2022-5-3 12:27

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

嗯嗯，她肯定喜欢的。

朵拉 发表于 2022-5-3 13:41

优雅的渐变边框 有空学习{:4_190:}

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

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

{:4_180:}

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

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

应该是

红影 发表于 2022-5-3 15:39

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

加林森 发表于 2022-5-3 16:56

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

嗯嗯。

查看完整版本: 优雅的渐变边框