码迷,mamicode.com
首页 > 其他好文 > 详细

CCS3怎么实现border边框渐变效果

时间:2018-11-21 12:25:57      阅读:822      评论:0      收藏:0      [点我收藏+]

标签:sha   button   developer   设置   ack   char   style   https   index   

 

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

  技术分享图片

 

  

  个人觉得,省事的做法,直接让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

  

  

  

  

 

CCS3怎么实现border边框渐变效果

标签:sha   button   developer   设置   ack   char   style   https   index   

原文地址:https://www.cnblogs.com/tu-0718/p/9993896.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!