css3照片边框border

日期:2021-01-20 类型:科技新闻 

关键词:制作小程序,小程序商城,扫码点餐小程序,微信小程序开店的步骤,牛刀小程序

针对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-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>
 

这些英语的语法叙述看起来十分的枯燥乏味,每一个人都喜爱看案例,这样最非常容易了解,下面大家就来将几个案例。

照片边框 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个事例,下面再度拿出来给大伙儿看看。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:详解css中background 返回下一篇:没有了