精华内容
下载资源
问答
  • 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-imagelinear-gradient以及供应商前缀。

    上面显示的border-image-slice的添加将设置image-border内容的内部偏移量。 需要此属性才能在框的周围完全显示渐变。 请参见下面的输出:

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

    从左到右渐变

    对角渐变


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

    更多相关内容
  • css边框颜色渐变

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

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

    1.直角的背景渐变

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    <!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">

        <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这个属性

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    <!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">

        <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);

            border-radius: 30px;

            content: '';

            z-index: -1;

         }

          

        </style>

    </head>

    <body>

        <button>进入平台</button>

    </body>

    </html>

    展开全文
  • 在实际开发中,我们经常遇见边框需要背景渐变的实现要求,那么如何去实现呢,今天给大家分享依稀几种情况1.直角的背景渐变border渐变button{background:transparent;color:#23b7cb;font-size:15px;padding:5px 15px;...

    04336d15f8b57e000ed1ff6b77fe34b3.png

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

    1.直角的背景渐变

    54a7e598e0f6b650e1c5d5c509385157.png

    border渐变

    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;

    }

    进入平台

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

    2.圆角的背景渐变

    32fe0ecab1dcc7cba78d06934ff49b71.png

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

    linear-gradient这个属性

    border渐变

    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);

    border-radius: 30px;

    content: '';

    z-index: -1;

    }

    进入平台

    转载请注明出处:

    本文链接:https://www.wlyc.cn/post-204.html

    展开全文
  • css3边框颜色渐变

    2021-09-10 10:54:46
    首先,对边框颜色测试了线性渐变函数,发现果然是不支持的 伪类 这里选择使用伪类元素来实现效果 代码如下 .btn { position: relative; color: #23b7cb; font-size: 15px; padding: 5px 15px

    前言

    边框(border),平时最常用的样式之一,它可以设置宽度、样式和颜色。以前需求都比较单纯,颜色使用单色就能满足要求,但是现在不一样了,用户审美提高了,要求就三点:好看!好看!还是TM的好看!OK,那么话不多说,直接进入正文。

    正文

    首先,对边框的颜色测试了线性渐变函数,发现果然是不支持的
    在这里插入图片描述

    伪类

    这里选择使用伪类元素来实现效果
    在这里插入图片描述
    代码如下

    .btn {
    	position: relative;
    	color: #23b7cb;
    	font-size: 15px;
    	padding: 5px 15px;
    	background: #fff;
    	border-style: hidden;
    	border-radius: 30px;
    }
    
    .btn:after {
    	content: '';
    	position: absolute;
    	top: -2px;
    	bottom: -2px;
    	left: -2px;
    	right: -2px;
    	background: linear-gradient(to right, #0396ff, #21f7e8);
    	border-radius: 30px;
    	z-index: -1;
    }
    

    边框图片(border-image)

    border-image,顾名思义:指定边框的图片,这里可以传入线性渐变函数来实现渐变效果
    在这里插入图片描述
    代码如下

    .btn {
    	color: #23b7cb;
    	font-size: 15px;
    	padding: 5px 15px;
    	border: 2px transparent solid;
    	border-image: linear-gradient(to right, #0396ff, #21f7e8) 1 10;
    }
    

    虽然实现了渐变效果,但是它只能实现直角边框,无法使用border-radius来实现圆角效果,随后我查询到了 clip-path 裁剪属性,效果如下
    在这里插入图片描述
    代码如下

    .btn {
    	color: #23b7cb;
    	font-size: 15px;
    	padding: 5px 15px;
    	border: 4px transparent solid;
    	border-image: linear-gradient(to right, #0396ff, #21f7e8) 1 10;
    	clip-path: inset(0 round 4px);
    }
    

    clip-path的更多用法请自行百度

    展开全文
  • css设置边框渐变

    2019-10-22 14:31:24
    使用css设置按钮边框渐变色;使用css设置按钮边框渐变
  • 清晰易懂的了解CSS中的边框颜色渐变 使用边框颜色渐变之前,先简单了解一下两种渐变方式: 线性渐变 linear-gradient(方向, 颜色1, 颜色2, … ,颜色n); 径向渐变 radial-gradient(颜色1 覆盖区域大小,颜色2 ...
  • linear-gradient线条用来制作边框还是比较给力的,尤其是利用其描边可以制作一些复制的边框效果,这里我们就来看一下利用CSS3的线性渐变linear-gradient制作边框的示例
  • 通过CSS border-radius,我向大家展示了如何实现方形元素的圆角效果,这解决了以前美工...CSS渐变色(Gradients)也是一个类似的技术。现在火狐,谷歌浏览器,Safari,IE8+都支持这种技术,我们可以安全的在网站上使用它
  • 1.需求有这么个东西,个人不习惯背景图片来解决,开始了css尝试。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8">...边框渐变的拱形</title> 6 ...
  • css3边框颜色渐变的两种实现方法-css教程-PHP中文网 http://www.php.cn/css-tutorial-409887.html
  • 利用CSS实现渐变边框

    千次阅读 2022-02-13 18:41:46
    通过CSS实现渐变边框的几种方法: 一、用border-image 来实现: CSS代码如下: .box { width: 200px ; height: 200px ; border: 10px solid #ddd; border-image: linear-gradient(rgb(89, 0, 255),pink) 30 30...
  • CSS--border边框颜色渐变

    万次阅读 2019-09-25 14:48:45
    废话不多说,平时我们在做边框border时,总能看到界面上一些边框颜色渐变的效果,比较常见的就是qq主菜单界面,我们发现他的边框并不是一条纯色的实线,如果对其进行放大,就可以看到下图所示的内容: 可以...
  • css渐变圆角边框

    2022-03-04 13:57:24
    css渐变圆角边框
  • 我们设置边框颜色渐变时可以用到css3中的属性是border-image或者border-colorcss3边框颜色渐变,那么两个属性如何设置边框颜色渐变。 首先来看border-image属性实现的简单css3边框颜色渐变的例子: 第一种:border-...
  • 4种css实现渐变边框

    千次阅读 2021-10-21 10:31:56
    渐变边框相信大家在写项目中是会常遇见的,下面我们就来罗列一下边框渐变色的方法吧 1、使用 border-image <div style="width:500px;height:300px;background: #000;padding-top:100px;"> <div class=...
  • css3设置边框颜色渐变的方法有哪些发布时间:2020-09-14 14:51:54来源:亿速云阅读:110作者:小新css3设置边框颜色渐变的方法有哪些?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,958
精华内容 5,183
关键字:

css边框颜色渐变

友情链接: 电子相册.rar