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

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>

　　

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

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

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

  2. css3实现背景颜色渐变，文字颜色渐变，边框颜色渐变

    css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果.这篇文章主要介绍下css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变的方法,以便大家学习参考! 1.css背景颜色渐变 代码: ...

  3. css文字颜色渐变的3种实现

    在web前端开发过程中,UI设计师经常会设计一些带渐变文字的设计图,在以前我们只能用png的图片来代替文字,今天可以实现使用纯CSS实现渐变文字了.下面就介绍3中实现方式供大家参考! 基础样式: .g ...

  4. CSS 竖线颜色渐变

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  5. css背景颜色渐变

    1.效果 2.代码 /* 基本色 */ background: #3FB0AC; /* chrome 2+, safari 4+; multiple color stops */ background ...

  6. css颜色渐变在不同浏览器的设置

    在web开发中,难免会遇到浏览器之间的兼容问题,关于Css设置颜色渐变下面有解决的办法,直接上代码: 适用于谷歌浏览器: background: -webkit-gradient(linear, 0 ...

  7. CSS和JS两种颜色渐变文字效果代码

    js实现颜色渐变文字效果代码: <!-- js颜色渐变色文字 --> <div id="moml"> <div style="text-al ...

  8. 第四界css大会 黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等

    1.css网格背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. css盒子模型之边框宽度，边框颜色与边框样式

    /* width和height只是设置盒子内容区的大小,而不是盒子的整个大小, 盒子可见框的大小由内容区,内边距和边框共同决定. */ .box1 { /* 设置内容区的宽度为400px */ wid ...

随机推荐

  1. 2014年10月Android面试总结

    最近打算跳槽,所以到外面逛了一圈,发现外面的世界还是比较精彩的,同时也认识了自己的一些不足,以及作为一个Android开发者,自己后面需要掌握的东西做一下列举. 先介绍下本人的工作经历吧,本人11年7 ...

  2. Java枚举源码分析

    1.是一个范型类, 实现了Serializable和Comparable接口 2.只有两个成员变量:name.ordinal 3.枚举类隐含一个values函数,需通过反射调用才可获取枚举实例化对象列 ...

  3. zabbix 自动发现 相关

    zabbix自动发现,是zabbix精髓所在. 生产中,一台服务器上可能会存在多个监控实例,比如:A服务器2个,B服务器4个, C服务器1个.单单靠套模板来完成监控,做法那太糟糕了.比如小明有100台 ...

  4. linux文件映射到windows（方便用虚拟机搭建linux服务器，用本地windows代码编辑）

    1,安装docker: https://docs.docker.com/install/linux/docker-ce/centos/ 2,linux上创建好需要共享的目录 /data/share(可 ...

  5. Failed to instantiate CLSID_VirtualBox w/ IVirtualBox, but CLSID_VirtualBox w/ IUnknown works.

    我是 win7 64位 解决办法: 1, win+r 快捷键打开 “运行”,输入regedit 打开注册表 2,找到 HKEY_CLASSES_ROOT\CLSID\{00020420-0000-00 ...

  6. C# 点击打开浏览器

    System.Diagnostics.Process.Start("网址");//默认浏览器打开网页System.Diagnostics.Process.Start(@" ...

  7. HUE配置文件hue.ini 的yarn_clusters模块详解（图文详解）（分HA集群和非HA集群）

    不多说,直接上干货! 我的集群机器情况是 bigdatamaster(192.168.80.10).bigdataslave1(192.168.80.11)和bigdataslave2(192.168 ...

  8. HUE配置文件hue.ini 的hbase模块详解（图文详解）（分HA集群和非HA集群）

    不多说,直接上干货! 我的集群机器情况是 bigdatamaster(192.168.80.10).bigdataslave1(192.168.80.11)和bigdataslave2(192.168 ...

  9. Fiddler Web Debugger的代理功能（图文详解）

    不多说,直接上干货! Fiddler的大部分功能都是在其作为本地代理的基础上实现的,如上面介绍的原理图一样,如果想实现数据包截断功能必须要设置为代理,它的代理功能设置比较简单,Fiddler版本2以后 ...

  10. Eclipse *版本（图文详解）

    不多说,直接上干货! 关于Eclipse的版本介绍 Eclipse Standard 该版本是eclipse最基础的版本,适合Java se个人开发者.或希望根据自己需求配置插件的开发者使用. Ecl ...