Css3中的border-image属性详解

2019-09-11 郑州网站建设  

border-image是将简单的工作复杂化,当学习完该属性以后,发现该属性的运用能够大大节省编码时间和效率,总结一下,大致适用于以下两个场景:

元素边框不规则的情况。这时候,就需要用设计图作为边框背景,border-imagebackground-image相比,好处是更具灵活性,可以用代码控制边框背景的拉伸和重复,因而能够创造出更多样的效果

按钮宽高不确定的情况。用border-image来制作按钮,可以用同一张背景图,制造出各种宽高的按钮。

border-image属性分析

边框背景图片。格式为:url(“…”)

border-image-slice

图片边框向内偏移的距离。格式:border-image-slicetop right bottom left。分别指切割背景图片的四条线距离上右下左的距离。

该距离接受数值,百分数。默认数值的单位是px,但是不能在数值后面加px,否则这句css将不被浏览器解析。 用法和marginpadding类似。这里以数值举例,百分数同理。

border-image-slice: 10; /*距离上下左右均为10px;*/

border-image-slice: 10 30; /*距离上下10px,左右30px;*/

border-image-slice: 10 30 20; /*距离上10px,20px,左右30px;*/

border-image-slice: 10 30 20 40; /*距离上10px,30px,20px,40px;*/

四条线将背景图分割成了9个部分,其中1,2,3,4,6,7,8,9这八个区域将会被切割,作为图片边框,如果除了设置数值或者百分数,还加了一个“fill”,那么区域5就会作为背景填充进元素content,如:

border-image-slice: 25 11 fill;

注意:slice不接受负值;如果slice切割的左右距离之和大于背景图的宽,则上下边框不显示。如果slice切割的上下距离之和大于背景图的高,则左右边框不显示。

border-image-width

图片边框的宽度。只接受数值,且不能加单位。


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1971.html转载请标明出处,谢谢合作!
标签:
  • CSS3
  • е
  • 简单
  • border-image