zoukankan      html  css  js  c++  java
  • css3 border-image及连续的图像边框

    border-image

    它是下面几个值的简写:

    border-image-source // 使用绝对或相对地址url,引入图片

    border-image-slice   //切割图片,取值支持:<number> 或<percentage>其中number是没有单位的,

    border-image-width //边框图片的宽度

    border-image-outset //边框向外延伸的距离

    border-image-repeat //边框如何重复取值有: stretch | repeat | round

    它的默认值是:none 100% 1 0 stretch。

    none:是border-image的默认值,如果取值为none时,表示边框无背景图片。

    使用 border-image 时,其将会替换掉border-style 属性所设置的边框样式。

    此外,规范要求使用 border-image 时边框样式必须存在。

    border-image的工作原理就是九宫格伸缩法:把图片切割成九块,然后把他们应用到边和角。

    上面的原图,应用到边框上效果如下:

    border:15px solid red;
    border-image: url(https://mdn.mozillademos.org/files/4127/border.png) 30 ;
     

    border-image: url(https://mdn.mozillademos.org/files/4127/border.png) 30 repeat;//增加了repeat属性 效果如下

     小应用:生成老式信封的边框样式

    border-image可以运用渐变生成类似信封边框样式

    div {
        padding: 1em;
        border: 16px solid transparent;
        border-image: 16 repeating-linear-gradient(-45deg, red 0,red 1em,
        transparent 0,transparent 2em,blue 0,blue 3em,transparent 0,transparent 4em );
        max-width: 20em;
     }

    效果图:

    此外,通过background和渐变生成蚂蚁行军的边框。

    @-webkit-keyframes ants { to { background-position: 100% 100% } }
     div{
       -webkit-animation: ants 12s linear infinite;     
        padding: 1em;
        border: 1px solid transparent;
        background: linear-gradient(white, white) padding-box,
                    repeating-linear-gradient(-45deg, black 0, black 25%, transparent 0, transparent 50%) 0 / .6em .6em;

    效果图(静态的):

    当然,border-image还有个强大的技巧就是搭配渐变图案:

    列如,我们需要有个顶部边框被裁切的效果类似脚注。

    我们要做的就是运用border-image加上一条由渐变生成的垂直条纹,而边框的粗细有border中的width来控制。

    border-top:.2em solid transparent;
    border-image: 100%  0 0 linear-gradient(90deg ,currentcolor 4em,transparent 0);
    padding-top: .5em;

     

  • 相关阅读:
    单点登录cas常见问题(八)
    11G新特性 -- variable size extents
    11G新特性 -- ASM Fast Mirror Resync
    redhat 6.4 安装VirtualBox自动增强功能功:unable to find the sources of your current Linux kernel
    LINUX使用DVD光盘或者ISO作为本地YUM源
    数据库报ORA-00600: 内部错误代码, 参数: [17059],并产生大量trace日志文件
    Putty设置删除
    ssh/scp 远程连接ssh非默认端口方法
    查看LINUX版本
    RHCE7 -- systemctl命令
  • 原文地址:https://www.cnblogs.com/rain-null/p/6677913.html
Copyright © 2011-2022 走看看