接下来我们通过如下所示的图片来演示一下 border-image-source、border-image-slice、border-image-width、border-image-outset 和 border-image-repeat 几个属性的使用。 1. border-image-source border-image-source 属性用来定义边框要使用的图像,通过该属性可以指定一个图像来替换边框的默认样式,当 border-image-so...
border-image:border-image-source||border-image-slice[/border-image-width|/border-image-width?/border-image-outset]?||border-image-repeat 通过语法可以看出 border-image 是 border-image-source、border-image-slice、border-image-width、border-image-outset 和 border-image-repeat 属性的简写,其中: border...
border-image-slice值为 30 和 fill,表示我们将图像切割为九个区域,并且填充剩余的空间。border-image-repeat设置为 round,这意味着图像将在边框区域中尽可能完整地显示。border-width设置为 30px,为边框图像提供了空间。
border-image-outset 设置边框图像超出边框的量。属性值：尺寸值border-width 的倍数 有四种设置方式，分别代表顶部、右侧、底部及左侧的 outset 值。border-image-repeat 设置边框图像的呈现方式。属性值：stretch 拉伸repeat 平铺round 类似于 repeat。无法平铺时，会对图像进行缩放 border-image-slice border-image-sou...
.border-image{border:27pxsolid gray;border-image-source:url(border.png);border-image-slice:27;border-image-width:27px110%10px;//边框图片宽度设置为top:27px,right:1倍,bottom:10%,left:27px,因此这些值将代替20px成为图片边框宽度。 }
border-image属性很容易记,它允许你将图片或CSS渐变形状作为一个元素的边框。 .module{border-image:url(border.png) 25 25 round;} 该属性能被应用于任何元素,但当表格元素(如` tr,th,td `)的border-collapse属性值为collapse时border-image属性无效。
border-image属性是一个简写的CSS属性,它可以同时设置border-image-source、border-image-slice、border-image-width、border-image-outset和border-image-repeat属性。 为一个元素设置边框图像通常会经过以下的几个步骤: 1、通过border-image-source属性来指定使用的边框图像。
border-image的参数就是上面提到的三个:图片,剪裁位置,重复性。 1、图片(border-image-source) 与CSS2中background-image属性一样,border-image的背景图使用url()调用,图片可以是相对路径或是绝对路径,也可以不使用图片,即border-image:none; 2、图片剪裁位置(...
border-image 是定义边框的图像文件,它细分为几个属性: border-image-source: 边框图像文件地址 如:border-image-source: url('path/to/image.jpg'); border-image-slice: 图像划分为多个区域 如:border-image-slice: 70; border-image-width: 边框图像宽度 如:border-image-width: 40%; border-image-repeat...
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..