下图注册按钮的边框有渐变效果，如果让你来实现，你会怎么做呢

　　

　　

　　个人觉得，省事的做法，直接让UI给背景图片就可以了，如下图

　　

　　不过这种做法感觉不太灵活，如果要修改border的渐变颜色，就需要UI重新做图。那应该怎么做呢？

　　我首先想到的方法就是用CSS3的border-image属性

　　border-image有2种用法

　　①：使用图片    

　　

　　　②：使用渐变

　　　

　　注：然后我选择使用上面第二种方法，渐变来实现。但遇到一个问题——border-raduis圆角属性设置无效

　　后来经过多番查找，终于找到了解决方法，截图和demo如下

　　

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <title></title>

        <style>

            .border {

            position: relative;

            outline: 0;

            width: 100%;

            text-align: center;

            border: 4px solid transparent;

            border-radius: 16px;

            background: linear-gradient(orange, violet);

            background-clip: padding-box;

            padding: 10px;

            /* just to show box-shadow still works fine */

            box-shadow: 0 3px 9px black, inset 0 0 9px white;

        }

        .border::after {

            position: absolute;

            top: -4px;

            bottom: -4px;

            left: -4px;

            right: -4px;

            background: linear-gradient(red, blue);

            content: '';

            z-index: -1;

            border-radius: 16px;

        </style>

    </head>

    <body>

        <button class="border">点我</button>

    </body>

</html>

　　原文链接：https://segmentfault.com/q/1010000006613100/a-1020000006619501

　　

　　

　　补充：然后我根据这个demo和UI给的设计图注册按钮做了小的调整，效果截图和demo如下　

　　　　  因为我是自己取的色，可能会有偏差，尽力还原了，见谅

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <title></title>

        <style>

            body {

                /* 只是为了更好的查看效果添加的背景颜色  */

                background-color: #090909;

            }

            .border {

            position: relative;

            outline: 0;

            width: 100%;

            text-align: center;

            border: 1px solid transparent;

            border-radius: 16px;

            background-color: #3B3933;

            background-clip: padding-box;

            color: #F6DFB4;

            padding: 10px;

        }

        .border::after {

            position: absolute;

            top: -4px;

            bottom: -4px;

            left: -4px;

            right: -4px;

            background: linear-gradient(#AB8124,#F0DF67,#2F1F08);

            content: '';

            z-index: -1;

            border-radius: 16px;

        </style>

    </head>

    <body>

        <button class="border">注册</button>

    </body>

</html>

　　

CCS3怎么实现border边框渐变效果的更多相关文章

  1. iPhone 6/plus iOS Safari fieldset border 边框消失

    问题:iPhone6 plus 手机浏览网页,fieldset border 边框消失. 示例代码: <div> <fieldset style="border: 1px ...

  2. css 使用background背景实现border边框效果

    css中,我们一般使用border给html元素设置边框,但也可以使用background背景来模拟css边框效果,本文章向大家介绍css 使用background背景实现border边框效果,需要的 ...

  3. 【代码笔记】Web-CSS-CSS Border(边框)

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  4. padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法

    盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型 ...

  5. CSS border边框属性教程(color style)

    CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...

  6. CSS3——盒子模型 border(边框) 轮廓(outline)属性 margin外边距 padding填充

    盒子模型 包括——边距,边框,填充,和实际内容 Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清 ...

  7. padding(内边距)、margin(外边距)、border(边框)

    元素的 padding 控制元素内容 content和元素边框 border 之间的距离. 元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离,如果你将一个元素的 mar ...

  8. border边框的宽度/样式/颜色 全部值

    border 用emmet写border的时候, 缩写是:bd. 不是b, 也不是bdr: b会扩展成bottom, bdr 会扩展成 border-right, border的宽度: 1px 基本上 ...

  9. [CSS]border边框

    border: 1px solid #ccc;    /*1像素 实线 灰色*/可分割成:border-width:1px;border-style: solid; border-color: #00 ...

随机推荐

  1. Java多线程中static变量的使用

    轉:https://blog.csdn.net/yy304935305/article/details/52456771 鲁迅先生曾说过:“时间就像海绵里的水,只要愿挤,总还是有的”.不管肿(怎)么说 ...

  2. VUEX报 “was assigned to but it has no setter”

    如果有当前的变量(VUEX声名的)会发生改变的(change),刚绑定的值需要在data () 内进行声明 一个新的变量进行处理.

  3. 【aardio】是否取消三个按键的对话框

    import win; var id = win.msgbox("三个按钮","标题",0x3/*_MB_YESNOCANCEL*/) 参考标准库函数: nam ...

  4. python基础：条件循环字符串

    一. 完成完整的温度转换程序 使用while True 循环,摄氏度转换为华氏度按1,华氏度转换成摄氏度按2,按其他数字退出循环. while True: a = int(input('摄氏度转换为华 ...

  5. 使用Tenorshare iCareFone for mac为iPhone做系统修复

    tenorshare icarefonemac中文版采用一键式方法来保护,修理,清洁,优化并最终加快您的iPhone,iPad和iPod的速度.它可以帮助您轻松解决所有iOS问题,并让您的iPhone ...

  6. GUI学习之五——QAbstractButton类学习笔记

    今天总结一下AbstractButton类的学习笔记. 一.描述 AbstractButton是对各种按键的抽象类他的继承关系是这样的 首先,QAbstractButton继承了QWidget类的各种 ...

  7. ESP8266擦除工具完整安装

    ESP8266擦除工具完整安装 一.  ESP8266擦除工具路径:http://down.liangchan.net/ESP8266%B2%C1%B3%FD%B9%A4%BE%DF%CD%EA%D5 ...

  8. 在 ASP.NET Core 中发送邮件遇到的坑_学习笔记

    功能需求 因为项目需要有个忘记密码验证邮箱再重新修改密码的功能,然后我选用了很简单的一个方案,通过验证登录用户的邮箱然后发送邮件,通过这个邮件发送的链接地址来最后实现密码修改的小功能. 项目环境及实现 ...

  9. 20155312 张竞予 Exp7 网络欺诈防范

    Exp7 网络欺诈防范 目录 基础问题回答 (1)通常在什么场景下容易受到DNS spoof攻击 (2)在日常生活工作中如何防范以上两攻击方法 实验总结与体会 实践过程记录 (1)简单应用SET工具建 ...

  10. 别人的Linux私房菜（17）进程管理与SELinux初探

    程序在磁盘中,通过用户的执行触发.触发事件时,加载到内存,系统将它定义成进程,给予进程PID,根据触发的用户和属性,给予PID合适的权限. PID和登陆者的UID/GID有关.父进程衍生出来的进程为子 ...