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

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. class字节码结构（三）（字段集合的结构）

    <Java虚拟机原理图解>1.4 class文件中的字段表集合--field字段在class文件中是怎样组织的 字段区:包括了字段计数器和字段数据区: 字段是指在类中定义的静态或者非静态的 ...

  2. 【learning】vim爆改记 （如何让vim用起来像devc++）

    由于本蒟蒻NOIP人品大爆发,能去冬令营,故准备开始练习使用linux下的IDE:vim 在dalao DTZ的帮助下,我装好了vim,并做了最初的配置. 然而........好难用啊,怎么和devc ...

  3. 面试题：js如何渲染十万条数据并不卡住界面

    这道题考察了如何在不卡住页面的情况下渲染数据,也就是说不能一次性将几万条都渲染出来,而应该一次渲染部分 DOM,那么就可以通过 requestAnimationFrame 来每 16 ms 刷新一次. ...

  4. 模拟登陆+数据爬取 (python+selenuim)

    以下代码是用来爬取LinkedIn网站一些学者的经历的,仅供参考,注意:不要一次性大量爬取会被封号,不要问我为什么知道 #-*- coding:utf-8 -*- from selenium impo ...

  5. 【Java并发编程】：深入Java内存模型—内存操作规则总结

    主内存与工作内存 java内存模型的主要目标是定义程序中各个变量的访问规则,即在虚拟机中将变量存储到内存和从内存中取出变量这样的底层细节.此处的变量主要是指共享变量,存在竞争问题的变量.Java内存模 ...

  6. mysql 数据库自动备份

    @echo offset "Ymd=%date:~,4%%date:~5,2%%date:~8,2%""E:/MySQL/MySQL Server 5.7/bin/mys ...

  7. Android 开发工具类 26_getFile

    从网络获取可执行文件 public void getFile() throws Exception{ // 首先得到请求的路径 String urlpath = "http://ftpcnc ...

  8. wp 自定义分页函数

    function kerui_pagination($query_string){ global $posts_per_page, $paged; $my_query = new WP_Query($ ...

  9. Web服务(Apache、Nginx、Tomcat、Jetty)与应用(LAMP、CMS-WordPress&Ghost、Jenkins、Gitlab)

    Web服务和应用是目前信息技术领域的热门技术.如何使用Docker来运行常见的Web服务器(包括Apache.Nginx.Tomcat等),以及一些常用应用(LAMP.CMS等).包括具体的镜像构建方 ...

  10. java 序列化与解序列化

    小例 import java.io.*; public class Box implements Serializable{ private int width; private int height ...