CSS3之图片边框

图片边框

兼容性 较差,实际开发的时候 为了保证 用户 起码有一个 最基本的相框,会先设置一个 border属性,当浏览器不支持 border-image属性时 会使用默认的相框来显示

如果不设置border属性, 那么 就无法使用 图片相框

图片边框 默认的宽度 是 border的宽度

在没有border-image属性之前,元素边框的设置就是各种不同分隔的点,但是当你掌握了这个属性以后,还是能够做出一些精美的效果的

border-image用来代替border-style 值的。值得注意的是假如 border-image 值是none的话，那么背景图像将不会显示，同时， 将会显示border-style的值。

完整写法

同样隶属于border家族,border-image支持简写

• 示例代码:

.borImage{
            border-image: url("img/border_image_2.png") 17 / 17px / 17px round;
        }

组成属性

属性名	作用
border-image-source	用在边框的图片的路径。(url)
border-image-slice	图片边框向内偏移。
border-image-width	图片边框的宽度。
border-image-outset	边框图像区域超出边框的量。
border-image-repeat	图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

border-image-source属性

• 值:

  • none或者url("地址")
  • 默认值为:none
  • 作用:图片路径

• 示例代码:

.borImage{
            border:20px solid #000; 
            border-image-source: url("img/border_image_2.png");
            }
            /*如果只是单纯的设置该属性,真的很难看*/

border-image-slice属性

指定边框图像顶部、右侧、底部、左侧内偏移量。

• 值:

  • 1-4个值(不需要单位),对应的关系跟margin一致
  • 1-4个百分比,对应的关系跟margin一致
  • fill(可选):是否需要中间的区域
  • 作用:设置图片的切片大小

• 示例代码:

.borImage{
          border-image-source: url("img/border_image_2.png");
          border-image-slice: 27 ;
        }

• 工作原理:
  • 这个属性设置了以后就能够看到效果了,这里我们用这样图片作为演示

borderimg

• 我们设置的值,相当于将这张图片切割为九宫格,这张图片的分辨率为81*81 其中81=27*3

• 九宫格切法为

九宫格切法

• 当我们使用图片设置为边框时
  • 保证四个角不变,根据图片的拉伸效果进行改变

bdi_11.png

bdi_13.png

• 注:如果使用的是百分比,那么切割的时候就是按照总宽度的百分比来计算,其他的都是一致的
• slice不允许设置负值，设置负值和设置大于盒子的高度或者宽度都被100%
• slice切过的区域有可能会重叠，如果右切和左切的值之和≥盒子的宽度，那么顶部区域(5号)和底部区域（7号）为空白，反之亦然。

border-image-width属性

• 值:
  • 可选
  • 1-4个值,单位为(px,em,%),对应关系跟margin一致
  • 作用:设置图片边框的宽度
  • 图片边框 默认的宽度 是 border的宽度
  • 设置了宽度以后,以该宽度为准
  • 注:
    • 在chrome中使用有异常,如果不设置border的宽度,就无法使用该属性
• 示例代码

.border-image{ 
            border:20px solid #000;  //盒子边框宽度为20px
            border-image-source:url(border.png); 
            border-image-width:27px 1 10% 27px; 
            /*边框图片宽度设置为top:27px,right:1倍,bottom:10%,left:27px，因此这些值将代替20px成为图片边框宽度。*/
}

border-image-outset属性

• 值:

  • 1-4个值,单位为(px,em,%),对应关系跟margin一致
  • 作用:设置图片边框的向外延伸的值
  • 注:
    • 不能为负值

• 示例代码:

.borImage{
       border-image-source: url("img/border.png");
       border-image-slice: 27 ;
       border-image-width: 27px;
       border-image-outset: 27px;
        }

border-image-outset

border-image-repeat属性

• 值:
  • stretch(拉伸默认) 或 repeat(重复) 或 round(环绕)

• 示例代码:

 .borImage{
            border-image-source: url("img/border.png");
            border-image-slice: 27 ;
            border-image-width: 27px;
            border-image-outset: 27px;
            /*repeat 只是复制粘贴,可能出现缺角的情况*/
            /*border-image-repeat: repeat;*/
   
            /*默认的是 stretch 直接拉伸图片,容易失真*/
            border-image-repeat: stretch;
   
            /*可以设置为 round 让他平铺,会考虑图片完整性*/
            /*border-image-repeat: round;*/
        }

border-image-repeat