【CSS3】---为边框应用图片 border-image
为边框应用图片 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的更多相关文章
- CSS3之边框图片border-image
CSS3中有关border的属性,还有很多,今天我将为大家介绍一个很好玩的属性——Border-image.有了CSS3之边框图片Border-image,我们可以轻松搞定圆角,轻松搞定很多之前难搞的 ...
- 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...
- css3新增边框、阴影、边框、背景、文本、字体
css3和css有什么区别?简单来讲css3是css(层叠样式表)技术的升级版本,css3新特征有很多,例如圆角效果.图形化边界.块阴影与文字阴影.使用RGBA实现透明效果.渐变效果.使用@Font- ...
- css3设置边框属性
css设置边框属性:设置边框圆角 <!DOCTYPE html> <html> <head lang="en"> <meta charse ...
- css3圆角边框,边框阴影
border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...
- 为边框应用图片 border-image
为边框应用图片 border-image 顾名思义就是为边框应用背景图片,它和我们常用的background属性比较相似.例如: background:url(xx.jpg) 10px 20px no ...
- 6种炫酷的CSS3按钮边框动画特效
6种炫酷的CSS3按钮边框动画特效Button border animate 用鼠标滑过下面的按钮看看效果! Draw Draw Meet Center Spin Spin Circle Spin T ...
- 分别用css3、JS实现图片简单的无缝轮播功效
本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...
- css3(border-radius)边框圆角详解(转)
css3(border-radius)边框圆角详解 (2014-05-19 16:16:29) 转载▼ 标签: divcss html it css3 分类: 网页技术 传统的圆角生成方案,必须使用多 ...
随机推荐
- Django官方文档学习1——第一个helloworld页面
Django 1.10官方文档:https://docs.djangoproject.com/en/1.10/intro/tutorial01/ 1.查看django版本 python -m djan ...
- 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 ...
- SCCM 2007 R2部署、操作详解系列之概念
站点类型 在安装站点时,您决定它将是主站点还是辅助站点.然后,在安装其他站点时,您可以选择将其安排到层次结构关系中,以便父站点管理子站点,中央站点收集所有站点信息,从而进行集中式管理.也可以根据业务和 ...
- 使用NPOI导出DataTable到Excel
使用C#对DataTable导出到Excel是我们工作当中比较多用到的场景,微软提供了Microsoft.Office.Interop.Excel组件可以进行操作,但是该组件在数据量大的时候速度很慢, ...
- apache2.2 虚拟主机配置
一.改动httpd.conf 打开appserv的安装文件夹,找到httpd.conf文件,分别去掉以下两行文字前面的#号. #LoadModule vhost_alias_module module ...
- png图片那点事
PNG图片格式现在包含三种类型: 1.PNG8 256色PNG的别名 2.PNG24 全色PNG的别名 3.PNG32 全色PNG的别名 基本上PNG32就是PNG24,但 ...
- IOPS
http://www.cnblogs.com/sink_cup/archive/2012/09/14/ssd_iops_sql_nosql.html http://www.techrepublic.c ...
- 如何在Linux下拷贝一个目录呢
cp -af newadmin/movie/. uploadfile/mallvideo/ 如何在Linux下拷贝一个目录呢?这好像是再简单不过的问题了. 比如要把/home/usera拷贝到/m ...
- 判断null
var tmp = this.pullDown.getValue(); if(!tmp && typeof(tmp)!="undefined" &&am ...
- iso8583报文自学笔记
一.8583报文组成 TPDU 报文头 应用数据 ISO8583 Msg ID 目的 地址 源地址 应用类别定义 软件 总版本号 终端 状态 处理 要求 保留使用(软件分版本号) 交易数据 60H N ...