CSS3之边框图片border-image
CSS3中有关border的属性,还有很多,今天我将为大家介绍一个很好玩的属性——Border-image。有了CSS3之边框图片Border-image,我们可以轻松搞定圆角,轻松搞定很多之前难搞的东东。
一、border-image的语法
1、border-image-source
border-image-source:url(image);/*image可以是相对地址也可以是绝对地址*/
border-image-source跟CSS2中background-image属性相似,也是通过url()调用背景图片,图片的路径可以是相对地址也可以是绝对地址,当然你不想使用背景图片你也可以把值设置为none,即:border-image:none;其默认值就是none。
2、border-image-slice
border-image-slice: number(数字) || percentage(百分比)
border-image-slice是用来分解引入进来的背景图片,这个参数相对来说比较复杂和特别
(1)其取值支持:
I、number
number 专指像素px,因为其默认的单位就是像素px,所以在使用number时不需要加上单位,如果加上了单位反而是错误的写法。
II、percentage
Percentage指百分比的值,这个值是相对于边框背景图片而言的,例如边框图片的大小是300px*240px,我们取百分比为25% 30% 15% 20%,那么它们实际对应的效果就是剪切了图片的60px 90px 36px 60px的四边大小。百分比的值类似于我们border-width的取值方式,也是遵从top,right,bottom,left的规则。
(2)剪切的特性
在border-image中slice是一个关键部分,也是让人难以理解的部分。如果你用过CSS3中的clip属性,那么在理解border-image-slice来说相对会轻松一些。border-image-slice虽然表意上说不是剪切,但在我们实际应用中他就是一种纯粹的剪切,他把我们通过border-image-source取到的图片切成了九份,在像background-image一样重新布置。前面我们说了他有1~4个参数,类似于border-width的方位规则,在把剪切到的图片重新分布给他们。
3、border-image-width
border-image-width: number(数字) || percentage(百分比)
border-image-width就是border-width,用来设置边框的宽度,我们也可以直接用border-width来代替border-image-width的。
4、border-image-repeat
border-image-repeat: round(平铺) || repeat(重复) || rtretch(拉伸)
border-image-repeat是用来指定border-image的排列方式,这个属性设置参数和其他的不一样,border-image-repeat不遵循top,right,bottom,left的方位原则,他只接受两个(或一个)参数值,第一个表示水平方向,第二个表示垂直方向;当取值为一个值时,表示水平和垂直方向的排列方式相同。同时其默认值是stretch(拉伸),如果你省略不取值时,那么水平和垂直方向都是以stretch(拉伸)排列。参数值有:Round(平铺)、Repeat(重复)、Stretch(拉伸)。
5、border-image的综合写法
border-image: border-image-source(图片的路径) || border-image-slice(剪切的位置) || border-image-width(边框的宽度) || border-image-repeat(排列方式)
二、border-image的兼容
1、border-image的兼容情况
2、border-image的兼容写法
/*Mozilla内核Firefox*/
-moz-border-image: border-image-source(图片的路径) || border-image-slice(剪切的位置) || border-image-width(边框的宽度) || border-image-repeat(排列方式)
/*Webkit内核Safari and Chrome*/
-webkit-border-image: border-image-source(图片的路径) || border-image-slice(剪切的位置) || border-image-width(边框的宽度) || border-image-repeat(排列方式)
/*Opera*/
-o-border-image: border-image-source(图片的路径) || border-image-slice(剪切的位置) || border-image-width(边框的宽度) || border-image-repeat(排列方式)
/*W3C标准*/
border-image: border-image-source(图片的路径) || border-image-slice(剪切的位置) || border-image-width(边框的宽度) || border-image-repeat(排列方式)
三、border-image的例子(在谷歌浏览器下预览哟)
1、Round(平铺)效果
CSS代码:
div{ width: 240px; height:240px; border: 40px solid orange;
-webkit-border-image: url("http://www.leemagnum.com/img/d.png") 40 round ;
} /*
1、若是单方向的平铺只需要把排列方式改成横向和竖向的两部分即可
2、round(平铺)会压缩或伸展border-image的背景图片以其刚好适应border-width的宽度
*/
HTML代码:
<div>梦龙小站</div>
预览效果:
2、Repeat(重复)效果
CSS代码:
div{ width: 240px; height:240px; border: 40px solid orange;
-webkit-border-image: url("http://www.leemagnum.com/img/d.png") 40 repeat;
} /*
1、若是单方向的重复只需要把排列方式改成横向和竖向的两部分即可
2、repeat(重复)不管宽度适合不适合,直接居中重复
*/
HTML代码:
<div>梦龙小站</div>
预览效果:
3、Stretch(拉伸)效果
CSS代码:
div{ width: 240px; height:240px;border: 40px solid orange;
-webkit-border-image: url("http://www.leemagnum.com/img/d.png") 40 stretch;
}
/*
1、若是单方向的重复只需要把排列方式改成横向和竖向的两部分即可
2、stretch(拉伸)只是把中间剩下的图片拉伸到适应的宽高
*/
HTML代码:
<div>梦龙小站</div>
预览效果:
4、相框效果
CSS代码:
div{width:148px; height:148px;border:20px solid orange;
-webkit-border-image: url("http://www.leemagnum.com/img/a.png") 10 stretch;
}
HTML代码:
<div>
<img src="http://justflyhigh.com/img/front/erweima.png" alt="IT部落阁" />
</div>
预览效果:
5、圆角效果
CSS代码:
div {
border-width: 10px;
-webkit-border-image: url("http://www.leemagnum.com/img/a.jpg") 10;
width:200px;
height:300px;
}
HTML代码:
<div>梦龙小站</div>
预览效果:
CSS3之边框图片border-image就介绍到这里了,不知道大家看明白了么?若不明白的话欢迎大家在下面评论,咱们一起研究研究。若有更好的CSS3之边框图片border-image的案例欢迎分享哟。
CSS3之边框图片border-image的更多相关文章
- 第 23 章 CSS3 边框图片效果
学习要点: 1.属性初探 2.属性解释 3.简写和版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一.属性解释 CSS3 提 ...
- 第八十节,CSS3边框图片效果
CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一.属性解释 CSS3 ...
- css3 border img 边框图片
摘自http://www.html-js.com/article/CSS3-tutorial-css3borderimage-frame-image-Xiangjie-on border-image摘 ...
- Retina视网膜屏中CSS3边框图片像素虚边的问题
虽然CSS3新增了这个功能,但是在W3school里面并没有给出具体详细的解释,还好网上不乏大神给你我们很全面的解释其中的原理-css3:border-image边框图像详解 边框图片的原理是四个角不 ...
- CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换
边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...
- CSS3总结一:border(边框)
Border-CSS1的属性 Border-CSS1:border Border-CSS1:border-style Border-CSS1:border-width Border-CSS1:bord ...
- CSS3边框图片-像素虚边的问题
虽然CSS3新增了这个功能,但是在W3school里面并没有给出具体详细的解释,还好网上不乏大神给你我们很全面的解释其中的原理-css3:border-image边框图像详解 边框图片的原理是四个角不 ...
- 从零开始学 Web 之 CSS3(四)边框图片,过渡
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- CSS3边框图片属性---border-image
#div{ border:18px solid; border-image:url("http://img.mukewang.com/52e22a1c0001406e03040221.jpg ...
随机推荐
- java中存在的内存泄漏
大家都知道JAVA有着自己的优点---垃圾回收器的机制,这个开发人员带来了很大的方便,不用我们编程人员去 控制内存回收等问题,有效的解决了内存泄露的问题,不至于导致系统因内存问题崩溃.为了精确的回收内 ...
- 【mysql的设计与优化专题(4)】表的垂直拆分和水平拆分
垂直拆分 垂直拆分是指数据表列的拆分,把一张列比较多的表拆分为多张表 通常我们按以下原则进行垂直拆分: 把不常用的字段单独放在一张表; 把text,blob等大字段拆分出来放在附表中; 经常组合查询的 ...
- php中对共享内存,消息队列的操作
http://www.cnblogs.com/fengwei/archive/2012/09/12/2682646.html php作为脚本程序,通常生命周期都很短,如在web应用中,一次请求就是ph ...
- SQLite入门与分析(一)---简介
写在前面:出于项目的需要,最近打算对SQLite的内核进行一个完整的剖析,在此希望和对SQLite有兴趣的一起交流.我知道,这是一个漫长的过程,就像曾经去读Linux内核一样,这个过程也将是辛苦的,但 ...
- 173. Binary Search Tree Iterator
题目: Implement an iterator over a binary search tree (BST). Your iterator will be initialized with th ...
- POJ2503——Babelfish(map映射+string字符串)
Babelfish DescriptionYou have just moved from Waterloo to a big city. The people here speak an incom ...
- NuGet相关的文章
NuGet学习笔记(1)——初识NuGet及快速安装使用http://www.cnblogs.com/zhwl/p/3377510.html NuGet学习笔记(2) 使用图形化界面打包自己的类库ht ...
- 错误代码: 1005 Can't create table 'hibernate.bill' (errno: 150)
主要问题以及解决办法是: 1,MySQL支持外键约束,并提供与其它DB相同的功能,但表(外键表和外键主表)类型必须为 InnoDB,外键表和外键主表的类型都要是innoDB 建表约束语句: user表 ...
- BZOJ2542: [Ctsc2001]终极情报网
题解: 乘积最小只需要取对数.然后反向边就变成1/c,而不是-c了. 精度问题搞得我已经我想说什么了... 贴一份网上的pascal 代码: type ss=record x,y,c,r,next:l ...
- 纯干货,Spring-data-jpa详解,全方位介绍
本篇进行Spring-data-jpa的介绍,几乎涵盖该框架的所有方面,在日常的开发当中,基本上能满足所有需求.这里不讲解JPA和Spring-data-jpa单独使用,所有的内容都是在和Spring ...