zoukankan      html  css  js  c++  java
  • 一、渐变边框

    一、渐变边框

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <style type="text/css">
        
    .gradient-border{ 
        height: 200px;
        border: 5px solid transparent; 
        border-image: linear-gradient(to bottom, #0099CC, #F27280); 
        border-image-slice: 1;  
    }
    
    </style>
    <body>
        <div class="gradient-border" >
            ssda
        </div>
    
    </body>
    </html>
    

      虽然border-imagelinear-gradient()配合在一起,能实现渐变的边框效果,但它也有一定的缺陷性,比如我们项目中的按钮是带圆角的。那么对于这种情形,就算是你使用了border-radius也是无用:

    这是因为border-image中引用的是一张不带圆角的图片(linear-gradient()就相当于一张背景图)。也就是说,如果你需要一个带圆角的渐变边框,那么使用border-image是有局限性的,除非人肉为其准备

    此路似乎在这个项目中行不通,只能考虑换用别的方法。仔细一想,我可以把带有渐变边框的元素分成两层:

  • 相关阅读:
    ThinkPHP
    ThinkPHP
    静态化
    静态化
    静态化
    设计模式
    sublime
    静态化
    OPTIMIZE TABLE 小解
    information_schema系列八(事物,锁)
  • 原文地址:https://www.cnblogs.com/fger/p/10341247.html
Copyright © 2011-2022 走看看