简单的来介绍一下border-image的参数,让大家在脑海中有下初步的概念
1、none:是border-image的默认值,如果取值为none时,表示边框无背景图片;
2、<image>:设置border-image的背景图片,这个跟background-image一样,使用绝对或相对的url地址,来指定背景图片;
3、<number>:number是一个数值,用来设置边框的宽度,其单位是px,其实就像border-width一样取值,可以使用1~4个值,其具体表示四个方位的值,大家可以参考border-width的设置方式;
4、<percntage>:percntage也是用来设置边框的宽度,跟number不同之处是,其使用的是百分比值来设置边框宽度;
5、stretch,repeat,round:他们是用来设置边框背景图片的铺放方式,类似于background-position,其中stretch是拉伸,repeat是重复,round是平铺,stretch为默认值。
大家看到上面的参数介绍后一定会想起background-image这个属性。是的,这两者之间确实有一些类似之处,其中包括对图片的引用和排列方式都是一样的原理。为了更好的理解,先暂时把border-image在语法的表达形式进行属性的分解来阐述(实际应用中是不能分解的),这样就可以把border-image分解为:
1、引入图片:border-image-source
2、切割引入的图片:border-image-slice;:
3、边框的宽度:border-image-width;
4、图片的排列方式:border-image-repeat。
下面就详细的来介绍上面的四个属性的使用方法和其各自的特性,从而更好的深化border-image的相关知识点。
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/content/css3-border-image © w3cplus.com
在css中可以使用border实现一个三角形,举个例子:
效果展示如下:
那么为什么将border的三个边设置为transparent透明以后能生产一个三角形呢?接下来我们一步步解析。
我们来看一个平时使用的border例子:
这是我们平常使用border最普遍的情况——往往只给border一个较小的宽度(通常为1-2px);然而这样的日常用法就会容易让大家对border的形成方式产生误解,即认为元素的border是由四个矩形边框拼接而成。
然而事实并不是这样。实际上,元素的border是由三角形(准确说也是等边梯形)组合而成,为了说明这个问题,我们可以增大border的宽度,并为各border边设置不同的颜色:
效果图:
我们可以看到明显的四条边不是长方形,而是梯形,很像相框的四条边。
梯形的底是div对应的height或者width,梯形的高是对应border的宽度,梯形的顶边长度取决于div的内部空间。
我们进一步把div的高宽都改为0,梯形的顶边宽度变成了0,则可以得到对应的三角形了。
效果图:
此时元素由上下左右4个三角形“拼接”而成;那么,为了实现最终的效果,即保留最s上方的三角形,还应该怎么做?很简单,我们只需要把其它border边的颜色设置为白色或透明色:
效果图:
最终的简单三角形就绘制出来了。同理,如果想要得到其它边上的三角形,只需要将剩余的border边颜色设置为白色或透明色即可。
不过,被“隐藏”的上border仍然占据着空间,要想使得绘制出的三角形尺寸最小化,还需要将上border的宽度设置为0(其它情况同理):
border-top:1px solid redborder-left:XXX
border-bottom:XXX
border-right:XXX