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

1.直角的背景渐变

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>border渐变</title>
  9.     <style>
  10.      button{
  11.         background:transparent;
  12.         color:#23b7cb;
  13.         font-size:15px;
  14.         padding:5px 15px;
  15.         border:1px transparent solid;
  16.         border-image:linear-gradient(to right,#000718,#23b7cb) 1 10;
  17.      }
  18.  
  19.     </style>
  20. </head>
  21. <body>
  22.     <button>进入平台</button>
  23. </body>
  24. </html>

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

2.圆角的背景渐变

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

  1. linear-gradient这个属性
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>border渐变</title>
  9.     <style>
  10.      button{
  11.         color: #23b7cb;
  12.         font-size: 15px;
  13.         padding: 5px 15px;
  14.         background: #fff;
  15.         border: 1px transparent solid;
  16.         border-radius: 30px;
  17.         position: relative;
  18.      }
  19.      button:after{
  20.          content:'';
  21.          position: absolute;
  22.         top: -3px; bottom: -3px;
  23.         left: -3px; right: -3px;
  24.         background: linear-gradient(135deg,#000781, #23b7cb);
  25.         border-radius: 30px;
  26.         content: '';
  27.         z-index: -1;
  28.      }
  29.  
  30.     </style>
  31. </head>
  32. <body>
  33.     <button>进入平台</button>
  34. </body>
  35. </html>

3. 下边框渐变

或者 分割线 的边框渐变

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>border渐变</title>
  9.     <style>
  10.       div{
  11.           width:200px;
  12.           padding-bottom: 15px;
  13.         background:transparent;
  14.         /*color:#23b7cb;*/
  15.         font-size:15px;
  16.         padding:5px 15px;
  17.         border-bottom:3px transparent solid;
  18.         border-image:linear-gradient(to right,#000718,#23b7cb) 1 10;
  19.      }
  20.     </style>
  21. </head>
  22. <body>
  23.  
  24.     <div>下边框渐变</div>
  25. </body>
  26. </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. INI配置文件的格式

    为什么要用INI文件?如果我们程序没有任何配置文件时,这样的程序对外是全封闭的,一旦程序需要修改一些参数必须要修改程序代码本身并重新编译,这样很不好,所以要用配置文件,让程序出厂后还能根据需要进行必要 ...

  2. centos7.2 环境下 mysql-5.1.73 安装配置

    安装mysql,安装前准备 如果mysql用户不存在,那么添加mysql用户 groupadd mysql useradd -g mysql mysql mysql编译安装 tar -zxvf mys ...

  3. ZOC7在Mac下发送命令到多个窗口设置

    1 详见截图,找了半天 2 然后,下边框就会出现命令发送多个窗口的输入框了

  4. mysql 分库分表 ~ ShardingSphere生态圈

    一  简介   Apache ShardingSphere是一款开源的分布式数据库中间件组成的生态圈二 成员包含   Sharding-JDBC是一款轻量级的Java框架,在JDBC层提供上述核心功能 ...

  5. O2O、B2B、C2C（通俗讲解）

    你在地摊买东西,C2C你去超市买东西,B2C超市找经销商进货,B2B超市出租柜台给经销商卖东西,B2B2C你在网上下载个优惠券去KFC消费,O2O 一:O2O 1.概念: O2O即Online To ...

  6. Python-爬虫-Beautifulsoup解析

    简介 Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式.Beautiful Soup会帮你节省 ...

  7. ubuntu 16.04系统下解决MySQL 5.7版本的root用户重置密码问题

    最近在ubuntu系统上安装了MySQL,但是安装时没有提示输入root用户密码,在网上找了一天解决方案,试图修改root用户下的登入密码,但是网上的帖子都不凑效,最后终于改成功了,因此记下来以供有同 ...

  8. 【python】命令行神器 Click 简明笔记

    全文拷贝自 命令行神器 Click 简明笔记 Click Click 是用 Python 写的一个第三方模块,用于快速创建命令行.我们知道,Python 内置了一个 Argparse 的标准库用于创建 ...

  9. LVS前奏-ARP知识回顾

    什么是ARP协议: ARP协议,全称“Address Resolution Protocol”(地址解析协议),使用ARP协议,可以实现将IP地址解析成对应主机的物理地址(MAC地址) 为了能够正确的 ...

  10. java 并发 concurrent Executor

    Excutor类 Executor 执行提交的对象Runnable任务. ExecutorService 一个Executor ,提供方法来管理终端和方法,可以产生Future为跟踪一个或多个异步任务 ...