为边框应用图片 border-image

顾名思义就是为边框应用背景图片,它和我们常用的background属性比较相似。例如:

background:url(xx.jpg) 10px 20px no-repeat;

但是又比背景图片复杂一些。

想象一下:一个矩形,有四个边框。如果应用了边框图片,图片该怎么分布呢? 图片会自动被切割分成四等分。用于四个边框。

可以理解为它是一个切片工具,会自动把用做边框的图片切割。怎么切割呢?为了方便理解,做了一张特殊的图片,由9个矩形(70*70像素)拼成的一张图(210*210像素),并标注好序号,是不是像传说中的九宫图,如下:

我们把上图当作边框图片 来应用一下, 看一看是什么效果

根据border-image的语法:

#border-image{
background:#F4FFFA;
width:210px; height:210px; border:70px solid #ddd;
border-image:url(borderimg.png) 70 repeat
}

效果:

从序号可以看出div的四个角分别对应了背景图片的四个角。而2,4,6,8 被重复。5在哪?因为是从四周向中心切割图片的所以,5显示不出来。而在chrome浏览器中5是存在的,下图的样子:



repeat的意思就是重复,目前因为是刚好被整除,效果看不出来。如果改下DIV的宽高,再来看重复的效果:

边角部分为裁掉了,可见repeat就是一直重复,然后超出部分剪裁掉,而且是居中开始重复。

Round 参数:Round可以理解为圆满的铺满。为了实现圆满所以会压缩(或拉伸);

#border-image {

     width:170px;

     height:170px;

     border:70px solid;

     border-image:url(borderimg.png) 70 round;

 }

效果:

可见图片被压扁了。

Stretch 很好理解就是拉伸,有多长拉多长。有多远“滚”多远。

border-image:url(borderimg.png) 70 stretch

看一下效果:

2,4,6,8分别被拉伸显示。

注意:Chrome下,中间部分也会被拉伸,webkit浏览器对于round属性和repeat属性似乎没有区分,显示效果是一样的。

Firefox 26.0 下是可以准确区分的。

【CSS3】---为边框应用图片 border-image的更多相关文章

  1. CSS3之边框图片border-image

    CSS3中有关border的属性,还有很多,今天我将为大家介绍一个很好玩的属性——Border-image.有了CSS3之边框图片Border-image,我们可以轻松搞定圆角,轻松搞定很多之前难搞的 ...

  2. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

  3. css3新增边框、阴影、边框、背景、文本、字体

    css3和css有什么区别?简单来讲css3是css(层叠样式表)技术的升级版本,css3新特征有很多,例如圆角效果.图形化边界.块阴影与文字阴影.使用RGBA实现透明效果.渐变效果.使用@Font- ...

  4. css3设置边框属性

    css设置边框属性:设置边框圆角 <!DOCTYPE html> <html> <head lang="en"> <meta charse ...

  5. css3圆角边框,边框阴影

    border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...

  6. 为边框应用图片 border-image

    为边框应用图片 border-image 顾名思义就是为边框应用背景图片,它和我们常用的background属性比较相似.例如: background:url(xx.jpg) 10px 20px no ...

  7. 6种炫酷的CSS3按钮边框动画特效

    6种炫酷的CSS3按钮边框动画特效Button border animate 用鼠标滑过下面的按钮看看效果! Draw Draw Meet Center Spin Spin Circle Spin T ...

  8. 分别用css3、JS实现图片简单的无缝轮播功效

    本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...

  9. css3(border-radius)边框圆角详解(转)

    css3(border-radius)边框圆角详解 (2014-05-19 16:16:29) 转载▼ 标签: divcss html it css3 分类: 网页技术 传统的圆角生成方案,必须使用多 ...

随机推荐

  1. Django官方文档学习1——第一个helloworld页面

    Django 1.10官方文档:https://docs.djangoproject.com/en/1.10/intro/tutorial01/ 1.查看django版本 python -m djan ...

  2. Hadoop on Mac with IntelliJ IDEA - 7 解决failed to report status for 600 seconds. Killing!问题

    本文讲述作业在Hadoop 1.2.1完成map后ruduce阶段遇到failed to report status for 600 seconds. Killing!问题的解决过程. 环境:Mac ...

  3. SCCM 2007 R2部署、操作详解系列之概念

    站点类型 在安装站点时,您决定它将是主站点还是辅助站点.然后,在安装其他站点时,您可以选择将其安排到层次结构关系中,以便父站点管理子站点,中央站点收集所有站点信息,从而进行集中式管理.也可以根据业务和 ...

  4. 使用NPOI导出DataTable到Excel

    使用C#对DataTable导出到Excel是我们工作当中比较多用到的场景,微软提供了Microsoft.Office.Interop.Excel组件可以进行操作,但是该组件在数据量大的时候速度很慢, ...

  5. apache2.2 虚拟主机配置

    一.改动httpd.conf 打开appserv的安装文件夹,找到httpd.conf文件,分别去掉以下两行文字前面的#号. #LoadModule vhost_alias_module module ...

  6. png图片那点事

    PNG图片格式现在包含三种类型: 1.PNG8       256色PNG的别名 2.PNG24     全色PNG的别名 3.PNG32     全色PNG的别名 基本上PNG32就是PNG24,但 ...

  7. IOPS

    http://www.cnblogs.com/sink_cup/archive/2012/09/14/ssd_iops_sql_nosql.html http://www.techrepublic.c ...

  8. 如何在Linux下拷贝一个目录呢

    cp -af newadmin/movie/.   uploadfile/mallvideo/ 如何在Linux下拷贝一个目录呢?这好像是再简单不过的问题了. 比如要把/home/usera拷贝到/m ...

  9. 判断null

    var tmp = this.pullDown.getValue();   if(!tmp && typeof(tmp)!="undefined" &&am ...

  10. iso8583报文自学笔记

    一.8583报文组成 TPDU 报文头 应用数据 ISO8583 Msg ID 目的 地址 源地址 应用类别定义 软件 总版本号 终端 状态 处理 要求 保留使用(软件分版本号) 交易数据 60H N ...