border-image: url(border.png) 20% round; 代码语言:javascript 代码运行次数:0 运行 AI代码解释 #borderimg2{border:10px solid transparent;padding:15px;-webkit-border-image:url(img/border.png)20%round;/* Safari 3.1-5 */-o-border-image:url(img/border.png)20%round;/* Opera 11-12.1 */bord...
CSS3 border-image的参数:1、none:是border-image的默认值,如果取值为none时,表示边框无背景图片; 2、<image>:设置border-image的背景图片,这个跟background-image一样,使用绝对或相对的url地址,来指定背景图片; 3、<number>:number是一个数值,用来设置边框的宽度,其单位是px,其实就像border-width一样取值,可以使...
border-image-source:url(image);/*image可以是相对地址也可以是绝对地址*/ border-image-source跟CSS2中background-image属性相似,也是通过url()调用背景图片,图片的路径可以是相对地址也可以是绝对地址,当然你不想使用背景图片你也可以把值设置为none,即:border-image:none;其默认值就是none。 2、border-image-sl...
根据图示,切割完 border 的背景切片后,并且也已经设置了 border 的宽度(重要)。将相应的切片填充到 border 的相应位置。 需要注意的是:不论 border 的宽度设置的多大,后面切割的参数都是根据 border-image 引入图片的尺寸设置的参数, 或者说是根据引入图片大小设置的切割参数。 切割后的四周的八个切片,四个角根据...
border-image的参数就是上面提到的三个:图片,剪裁位置,重复性。 1、图片(border-image-source) 与CSS2中background-image属性一样,border-image的背景图使用url()调用,图片可以是相对路径或是绝对路径,也可以不使用图片,即border-image:none; 2、图片剪裁位置(...
CSS3 border-image 属性 实例 指定作为div元素周围边框的图像: [mycode3 type='css'] #borderimg { -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */ -o-border-image: url(border.png) 30 round; /* Opera 11..
CSS3 边框(Border)使用CSS3,可以将图像应用于元素的边框上。 使用CSS3边框 CSS3提供了两个新属性,用于以更加优雅的方式对元素的边框进行样式设置- border-image用于将图像添加到边框的border-radius属性,以及用于在不使用任何图像的情况下制作圆角的属性。
border-image-slice参数 属性名称:border-image-slice 值:[<number> | <percentage>]{1,4} && fill? 初始值:none border-image-slice,指定边框图像顶部、右侧、底部、左侧内偏移量。其作用就是把边框图像切成9个区域:4个角、4边区域和一个中间部位,俗称称作9宫格,其操作流程如下: ...
border-image属性 针对上面情况,CSS3中增加了一个border-image属性,可以让处于随时变化状态的元素的长或宽的边框统一使用一个图像文件来绘制。 使用border-image属性,会让浏览器在显示图像边框时,自动将所使用到的图像分割为9部分进行处理,这样就不需要页面制作者再另外进行人工处理了。另外,页面中也不需要因此而使用...
border-image-outset:[ <length> | <number> ]{1,4} 不允许负值。 该属性用于指定边框图像向外扩展所定义的数值,即如果值为10px,则图像在原本的基础上往外延展10px再显示。 对应的脚本特性为borderImageOutset。 <' border-image-repeat '>: 设置或检索对象的边框图像的平铺方式。默认stretch ...