css边框颜⾊渐变_如何创建CSS渐变边框颜⾊
有了CSS3的所有新功能，我们现在可以构建⽆图像的⽹站。 过去，在显⽰渐变颜⾊时不可避免地要使⽤图像。
如今， 使⽤CSS3 Gradient Background变得更加精简 。 在之前的⽂章中，我们向您展⽰了如何以各种形式和⽅向将CSS3 Gradient作为背景⾊发挥作⽤。 ， 和 。
但是CSS3 Gradient不仅会停⽌供后台使⽤。 您知道吗， 您也可以在边界内使⽤它 ？ 继续阅读以了解如何执⾏此操作。
第⼀种⽅法
第⼀种⽅法是在伪元素内应⽤CSS3 Gradient。 好吧，让我们看看这个技巧是如何⼯作的。
从上到下的渐变边框
我们将从⼀个从顶部到底部扩散的简单渐变开始。 ⾸先，创建⼀个带有div的框，如下所⽰。
<div class="box"></div>
.
box {
width: 400px;
height: 400px;
background: #eee;
}
要在框边框中形成渐变，请先在框的顶部和底部设置实线边框。 我们还创建了2个带有2个伪元素 s的矩形- :before和:after ，并以与框边框宽度相同的⼤⼩指定宽度。
将矩形放置在框的左侧和右侧，并通过background-image采⽤linear-gradient 。 您可以在下⾯看到这个技巧的结果：
从左到右边界渐变
现在，让我们以与前⾯的⽰例相同的⽅式创建⼀个横跨左右的渐变。 仅这次，我们将在左侧和右侧⽽不是顶部和底部添加框框。
div border属性
同样，我们还利⽤伪元素 - :before和:after来塑造2个矩形。 但是，与前⾯的⽰例相反，我们现在将它们放在框的顶部和底部。
对⾓边界渐变
⽤这种技巧创建对⾓线渐变在技术上很复杂。
尽管如此，我们还是依靠2个伪元素:before和:after并使⽤linear-gradient 。 但是，这⼀次，我们将在伪元素内采⽤2 linear-gradient 。 每个梯度彼此相对。 有关详细信息，请参见以下源代码。
第⼆招
第⼆种⽅法是使⽤CSS3 border-image属性。 CSS3中的border-image属性允许我们使⽤图像以及CSS3渐变来填充边框。
浏览器对border-image⽀持⾮常好； Chrome，Internet Explorer 11，Firefox，Safari和Opera都可以完全呈现border-image 。 但是，应注意， border-image仅适⽤于矩形或盒⼦。
这意味着添加border-radius会偏离border-image输出。
以下是border-image属性规范：
border-image: <source> <slice> <width> <outset> <repeat|initial|inherit>;
<source>是指定边框中使⽤的图像的路径。 在这⾥，我们将使⽤CSS3 Gradient代替它。 为了获得与前⾯⽰例相同的输出，我们
在border-image内应⽤CSS3 Gradient，如下所⽰。
.box{
width: 250px;
height: 250px;
background: #eee;
border: 20px solid transparent;
-moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
-webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
border-image-slice: 1;
}
如果不指定border宽度，则border-image将不显⽰任何内容。 因此，如您在上⾯看到的，我们添加了20px的边框宽度和透明的边框颜⾊。然后，我们为早期Webkit和Firefox版本设置border-image和linear-gradient以及供应商前缀。
上⾯显⽰的border-image-slice的添加将设置image-border内容的内部偏移量。 需要此属性才能在框的周围完全显⽰渐变。 请参见下⾯的输出：
这种⽅法提供了更⼤的灵活性，可以在每个可能的⽅向上调整梯度。 从左到右，从上到下，对⾓线或成⼀定⾓度。 以下是⼀些⽰例：
从左到右渐变
对⾓渐变

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。