美文网首页
border-image详解

border-image详解

作者: 保锦 | 来源:发表于2017-04-08 17:12 被阅读0次

一、border-image的兼容性


二、border-image的参数(包括图片、裁剪位置、重复性)

       1、图片(border-image-source)采用url()调用,可以是相对/绝对路径                          

      2、图片的裁剪位置(border-image-slice)                                                                                

            1>参数没有单位,专指像素。border-image:url(a.png)27 repeat;                                                   这里27指27px                                                                                                                      

             2>支持百分比,百分比大小相对于边框图片而言                                                                

             3>裁剪特性,效果的实现上类似于九宫格裁剪,有1~4个参数,方位符合CSS普遍的方位规则(上右下左,顺时针)                                                                                              

               border-image:url(border.png)30 %  35% 40%  30%  repeat;                                               

在图片上部30%的地方裁剪一下,在右部35%的地方裁剪一下,在底部40%的地方裁剪一下,在左部30%的地方裁剪一下。形成了九个分离区域——九宫格

     3、重复性(border-image-repeat)参数0~2个,2个参数一个水平,一个垂直

            这里重复与background的背景重复,差异较大。background图片的重复包括:重复、不重复、水平重复、垂直重复。对于border-image而言包括:repeat(重复)、round(平铺)、stretch(拉伸),其中stretch是默认值。


三、应用

使用的图片

四、参考内容

1、http://www.zhangxinxu.com/wordpress/?p=518

2、http://www.w3school.com.cn/cssref/pr_border-image.asp


相关文章

  • border-image详解

    一、border-image的兼容性 二、border-image的参数(包括图片、裁剪位置、重复性) 1、...

  • css3

    border-color border-image border-radius border-image和bor...

  • 不常见的CSS

    border-image

  • border-image

    border-image的属性

  • 渐变色圆环

    通过border-image来实现渐变色边框,但是border-image无法实现圆角,所以换一个思路:通过pad...

  • 2019-05-16 CSS3的border-image左右边框

    CSS3的border-image 今天在写页面的时候用到了css3的border-image属性,之前一直没有注...

  • border-image

    border-image 原始图片690*678 标注图片690*678 有边框(内容在边框里面) 无边框(内容贴...

  • css3:border-image边框图像详解

    转载声明:此文章为转载,点击查看原文。如有侵权24小时内删除。联系QQ:1522025433 自我介绍 hello...

  • border-image 属性

    border-image 属性 border-image-source 资源 图片路径 border-image...

  • CSS3

    边框 border-radius - 圆角边框 box-shadow - 边框阴影 border-image - ...

网友评论

      本文标题:border-image详解

      本文链接:https://www.haomeiwen.com/subject/ldilattx.html