css边框颜色渐变

css边框颜色渐变_如何创建CSS渐变边框颜色
千次阅读
2020-06-17 20:08:35
有了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 。您可以在下面看到这个技巧的结果：

从左到右边界渐变

现在，让我们以与前面的示例相同的方式创建一个横跨左右的渐变。仅这次，我们将在左侧和右侧而不是顶部和底部添加框框。

同样，我们还利用伪元素 - :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内容的内部偏移量。需要此属性才能在框的周围完全显示渐变。请参见下面的输出：

这种方法提供了更大的灵活性，可以在每个可能的方向上调整梯度。从左到右，从上到下，对角线或成一定角度。以下是一些示例：

从左到右渐变

对角渐变

翻译自: https://www.hongkiat.com/blog/css-gradient-border/
html java html5

更多相关内容

css边框颜色渐变

千次阅读 2020-03-27 18:29:48

在实际开发中，我们经常遇见边框需要背景渐变的实现要求，那么如何去实现呢，今天给大家分享依稀几种情况 1.直角的背景渐变 1 2 3 4 5 6 7 8 9 10 11 12 ...

在实际开发中，我们经常遇见边框需要背景渐变的实现要求，那么如何去实现呢，今天给大家分享依稀几种情况

1.直角的背景渐变

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>border渐变</title>

<style>

button{

background:transparent;

color:#23b7cb;

font-size:15px;

padding:5px 15px;

border:1px transparent solid;

border-image:linear-gradient(to right,#000718,#23b7cb) 1 10;

}

</style>

</head>

<body>

<button>进入平台</button>

</body>

</html>

　　注意问题：border-image的使用是不能实现圆角的效果，各位需要注意这个属性

2.圆角的背景渐变

代码如下：利用伪类元素去实现背景边的渐变效果，同时我们还可以加上动画效果，利用的是transtion:all ease 300ms即可，主要使用了

1	`linear-gradient这个属性`

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>border渐变</title>

<style>

button{

color: #23b7cb;

font-size: 15px;

padding: 5px 15px;

background: #fff;

border: 1px transparent solid;

border-radius: 30px;

position: relative;

}

button:after{

content:'';

position: absolute;

top: -3px; bottom: -3px;

left: -3px; right: -3px;

background: linear-gradient(135deg,#000781, #23b7cb);