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

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

    <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即可，主要使用了

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

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

3. 下边框渐变

或者 分割线 的边框渐变

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

      div{

          width:200px;

          padding-bottom: 15px;

        background:transparent;

        /*color:#23b7cb;*/

        font-size:15px;

        padding:5px 15px;

        border-bottom:3px transparent solid;

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

     }

    </style>

</head>

<body>

    <div>下边框渐变</div>

</body>

</html>

css边框渐变的更多相关文章

  1. css 边框颜色渐变的半圆

    1.需求有这么个东西,个人不习惯背景图片来解决,开始了css尝试. <!DOCTYPE html> <html> <head> <meta charset=& ...

  2. 理解CSS边框border

    前面的话   边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式   边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度 ...

  3. 第 17 章 CSS 边框与背景[下]

    学习要点: 1.设置背景 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一．设置背景 盒模型的尺寸可以通过两种方式实现可见性, ...

  4. 用CSS边框图像让你的网站更漂亮

    不久之前,添加一些装饰性元素,例如给网页中的图片添加花哨的边,以及耐心调整CSS文件才能使你的网页看起来不错.然而现在CSS已经做出了改变,用复杂的边框装饰你的网站只需几行代码.这篇文章将告诉你如何做 ...

  5. CSS边框效果

    前面的话 本文将详细介绍CSS边框效果 半透明边框 border:10px solid hsla(0, 0%, 100%,.5); background-clip:padding-box; 缝边效果 ...

  6. CSS常用渐变

    边框渐变: border-image: -webkit-linear-gradient( red , blue) 30 30; border-image: -moz-linear-gradient( ...

  7. 第 17 章 CSS 边框与背景[上]

    学习要点: 1.声明边框 2.边框样式 3.圆角边框 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一．声明边框 边框的声明有 ...

  8. CSS线性渐变

    /*CSS线性渐变*/ FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff, ...

  9. CSS 边框 阴影 效果

    CSS 边框 阴影 效果 以下将css实现阴影效果,以便须要朋友们,直接上代码 #shadow1{ width: 200px; height: 100px; color: white; backgro ...

随机推荐

  1. 069、Calico的默认连通性（2019-04-12 周五）

    参考https://www.cnblogs.com/CloudMan6/p/7536746.html   Calico 跨主机连通性测试   root@host1:~# docker exec bbo ...

  2. 【OpenGL】搭建opgl环境

    *GLFW+GLEW环境. 工具: GLFW库(下载) GLEW库 cMake软件(下载) 用cMake编译GLFW和GLEW成vs工程文件包,运行得到编译后文件. 在编译后文件夹中找到各个必需文件, ...

  3. 第29月第14天 evpp

    1.evpp https://github.com/Qihoo360/evpp/tree/master/examples/recipes/self_control_timer https://blog ...

  4. mybatis（入门级项目）

    框架的搭建:(两个java类,两个xml配置文件) 1.导入jar包,日志debug文件以及数据库的参数文件 2.建立持久化类(和数据库的列值相同的类) user类的一个扩展类: userQueryV ...

  5. (二)Java工程化--Maven实践

    Maven项目版本号 默认版本号: 1.0-SNAPSHOT 最佳实践是约定该版本为不稳定版本,如果发布一定要删除; 建议的版本规则: 主版本号.次版本号.增量版本号- 如:1.0.0-RELEASE ...

  6. jdk1.8新特性 lambda表达式和Stream

    一.Lambda 1.lambda : 匿名函数 2.好处:减少打码的冗余,增强匿名函数的可读性 3.语法格式 语法格式一 : 无参数,无返回值 () -> System.out.println ...

  7. http协议——无连接、无状态

    无连接 无连接的含义是限制每次连接只处理一个请求.服务器处理完客户的请求,并收到客户的应答后,即断开连接.采用这种方式可以节省传输时间. 早期这么做的原因是 HTTP 协议产生于互联网,因此服务器需要 ...

  8. 【原创】大叔经验分享（9）yarn重要配置yarn.nodemanager.local-dirs

    yarn中有一个比较重要的配置yarn.nodemanager.local-dirs,如果配置的不好,在饱和状态运行下集群会出现很多问题:1 默认配置${hadoop.tmp.dir}/nm-loca ...

  9. svn忽略不需要同步的文件夹或文件

    如果某个文件已经提交到了svn,这个时候需要通过svn来把服务器上的改文件删除,然后再在本地,点击该文件 选择把该文件删除,recursively表示递归删除(文件下->下级文件夹->下级 ...

  10. windows下的node环境搭建

    node环境的搭建过程: 1.首先在nodejs.org官网上下载一个msi安装文件,安装(过程很简单,基本上是一路next) 2.安装完成后,简单测试下是否安装成功,在cmd下输入两个命令: nod ...