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

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. tex中把参考文献标题删除

    如果是book类<br>\renewcommand\bibname{}<br> 如果是article类<br>\renewcommand\refname{}

  2. LINUX涉及网络相关知识

    才接触到网络的老铁,是否比较晕呢? 简单记录一下网络相关知识吧(IPV4)! A0. 网络号.主机号 A1.网络地址分类: A2. 保留地址: A3. 子网掩码作用:(子网掩码.IPV4地址做“与”运 ...

  3. keras的网络结构与网络配置

    摘自: https://www.cnblogs.com/Anita9002/p/8136357.html Keras的网络配置

  4. 如果在ie上报错又找不到问题原因该怎么办？

    我司项目需要兼容IE浏览器 QQ浏览器 360浏览器,调了几天发现QQ跟360都没问题了然后只剩下一个问题就是IE上报错了!!! 然后去百度找了各种原因  最后发现在IE浏览器这种引入方式无法解析会报 ...

  5. .Net三层架构

    .Net三层架构   希望朋友们留下自己对三层架构的理解... 三层体系结构的概念 用户界面表示层(USL) 业务逻辑层(BLL) 数据访问层(DAL) BLL将USL与DAL隔开了,并且加入了业务规 ...

  6. 第六章 使用 Bootstrap Typeahead 组件（百度下拉效果）（续）

    官方:http://twitter.github.io/typeahead.js/ 示例:http://twitter.github.io/typeahead.js/examples/(本文展示:Op ...

  7. 2019春季训练02: JU Flash Contest Gym - 102035 训练报告与复盘

    这场题极其简单 Solved 19 / 19 A Gym 102035A N integers 略 Solved 10 / 33 B Gym 102035B Mahmoud the Thief 用ma ...

  8. activiti工作流笔记

    什么是activiti? Activiti是一个身经百战的业务流程管理引擎, 并且还是一个流程平台 为什么要用工作流引擎? 简单来说,就是为了统一管理流程业务. 想想看,如果要设计一个流程的程序,通常 ...

  9. php中echo、print、print_r、var_dump、var_export区别

    (1) print和echo是语言结构,echo输出多个值,多个值之间用逗号分隔,无返回值:print只能输出一个值,有返回值.echo和print输出整型和字符串,没法打印布尔型,如果true,打印 ...

  10. Vertx eventbus模块解析

    eventbus 事件總線 協議棧 TCP分包,粘包解決採用方案: 消息定长(定義消息体總长度),消息分为消息头和消息体 dataType bytes description int 4 包体总大小 ...