针对CSS特性 border ,坚信全部的WEB开发设计人员都十分熟习。大家可根据设定HTML元素的 border 的宽度、色调、款式,来让HTML元素主要表现出不一样的边框,例如双线、虚线、圆点线。但无论你如何设定,这些全是1些十分初始的做法。从CSS3起,大家有了1个新的特性: border-image ,它能让你用好看的小照片来紧紧围绕HTML元素,以照片边框的方式出現。根据 border-image 特性,大家能够制做出十分好看的边框款式。
在CSS3里引进的许多新特点中,例如HTML5中新式input种类, 汉语字体样式(web font) ,placeholder等,都很好用,也很时兴,并且大家以前也举了1个十分好看的 border-image 的事例,但互联网上应用照片边框 border-image 的還是非常少,我想关键是由于谷歌访问器和火狐访问器很早就适用它们了,而IE11才适用这类英语的语法。
照片边框 border-image 的英语的语法
这些英语的语法叙述看起来十分的枯燥乏味,每一个人都喜爱看案例,这样最非常容易了解,下面大家就来将几个案例。
照片边框 border-image 用法1:边框图循环系统平铺(repeat)
这类状况下,边框图照片可能先后平铺,铺满边框地区。
<div id="repeat">照片可能循环系统贴满边框地区</div>
#repeat { border: 15px solid transparent; padding: 10px 20px; -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old Firefox */ -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */ -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */ border-image:url("/files/4127/border.png") 30 30 repeat; }
案例演试1:
照片边框 border-image 用法2:边框图自融入循环系统平铺(round)
大伙儿或许看到了,上面的照片边框尽管很好看,但有个缺陷,便是当元素宽度或高宽比并不是边框图的整数金额倍时,最终1个/第1个照片不可以进行显示信息,会被遮挡1一部分,这样看起来很不美观大方。CSS3的设计方案者们早已考虑到到了这个难题,应用 round 特性值,就可以防止这类状况。 round 的功效是边框图开展略微的调剂,来确保每一个照片都能进行显示信息,提升了观赏性。
<div id="round">照片可能贴满边框地区</div>
#round { border: 15px solid transparent; padding: 10px 20px; -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old Firefox */ -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */ -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */ border-image:url("/files/4127/border.png") 30 30 round; }
案例演试2
照片边框 border-image 用法3:边框图拉伸平铺(stretch)
‘stretch’便是拉伸,将小照片拉长来铺满边框地区,其实不循环系统,很明显,这样边框图会形变。
<div id="stretch">照片可能拉伸贴满边框地区.</div>
#stretch { border: 15px solid transparent; padding: 10px 20px; -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old Firefox */ -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */ -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */ border-image:url("/files/4127/border.png") 30 30 stretch; }
案例演试3
很明显, border-image
第1种用法应当是不常见的,由于有时它会致使边框有残缺不全的觉得。而第2种和第3种用法各有不同,是各有不一样的美。这里应用的边框图实际上很简易。精致的美工能做出更好看的边框图,能展现转让人赞美的实际效果,就例如以前的文章内容里的1个事例,下面再度拿出来给大伙儿看看。
以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。