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

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. [再寄小读者之数学篇](2014-06-20 求极限-L'Hospital 法则的应用)

    设 $f\in C[0,+\infty)$, $a$ 为实数, 且存在有限极限 $$\bex \vlm{x}\sez{f(x)+a\int_0^x f(t)\rd t}. \eex$$ 证明; $f( ...

  2. 乘积型Sobolev不等式

    (Multiplicative Sobolev inequality). Let $\mu,\lambda$ and $\gamma$ be three parameters that satisfy ...

  3. PHP数组——数组正则表达式、数组、预定义数组

    正则表达式 1.替换 $s = "hello5world"; $s = preg_replace("/\d/","#",$s); echo ...

  4. jQuery.rotate.js（控制图片转动）

    jQuery.rotate.js笔记   1. jQuery.rotate.js是什么 一个开源的兼容多浏览器的jQuery插件用来对元素进行任意角度的旋转动画. 这个库开发的目的是为了旋转img的, ...

  5. Notepad++崩溃后文件内容找不到问题

    也许是因为Ctrl + s 摁太多太频繁,一不小心Notepad++崩溃了 重启后发现原来的文件还在,但是文件内容全部都被清空了 我没有手动备份这个文件, 如何找回??? 点击设置,首选项,里面有个备 ...

  6. 关于MySQL中的8个 character_set 变量

    https://blog.csdn.net/sun8112133/article/details/79921734 本篇会简单介绍在 MySQL 中关于 8个 character_set 变量的基本作 ...

  7. monkey测试 -- 原理和操作步骤

     Monkey测试原理: Monkey是Android中的一个命令行工具,可以运行在模拟器里或实际设备中.它向系统发送伪随机的用户事件流(如按键输入.触摸屏输入.手势输入等),实现对正在开发的应用程序 ...

  8. canvas图片合成中的坑

    需求 要用代码来实现多张外部图片和文字的合并而且要上传到七牛云,再将图片链接通过客户端分享出去.图片背景需要支持用户自定义更换. 实现方案 在一个canvas上多次调用drawImage函数,分别绘制 ...

  9. liunx系统下调整Swap分区大小

    作者:邓聪聪 添加swap交换空间的步骤如下:第一步:确保系统中有足够的空间来用做swap交换空间,准备在一个独立的文件系统中添加一个swap交换文件,在/tmp中添加1G的swap交换文件第二步:添 ...

  10. centos禁止与开启ping设置

    禁止ping: echo 1 > /proc/sys/net/ipv4/icmp_echo_ignore_all 允许ping: echo 0 > /proc/sys/net/ipv4/i ...