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..
border-image 是CSS 中的一个属性,用于使用图像作为元素的边框。这个属性提供了一种更灵活和自定义的方式来装饰元素的边框。 以下是一些与 border-image 相关的子属性: 1. border-image-source 用于指定用作边框图像的 URL。 如果未设置此属性或值为 none,则不会显示边框图像。 2. border-image-slice 用于定义...
border-image in the CSS Background and Borders Module Level 3 CR:https://www.w3.org/TR/css3-background/#border-images border-image at MDN:https://developer.mozilla.org/en-US/docs/Web/CSS/border-image border-image.com:http://www.border-image.com/ Border Image Explained from Dudley Store...
其中,none 为 border-image-source 属性的默认值,表示不使用图像来替换边框的默认样式;<image> 为使用 url() 函数指定的图像路径或者使用 linear-gradient() 函数定义的渐变色,用来替换默认的边框样式。 【示例】通过 border-image-source 属性使用图像来替换默认的边框样式: 1 2 3 4 5 6 7 8 9 10 11 12 ...
border-image-source:url(imageurl);/*image url可以是相对地址也可以是绝对地址*/ border-image-source跟CSS2中background-image属性相似,也是通过url()调用背景图片,图片的路径可以是相对地址也可以是绝对地址,当然你不想使用背景图片你也可以把值设置为none,即:border-image:none;其默认值就是none。
1.border-image-source 这个属性是用来传入作为边框图片的图片源,所有可以放入url()的值都可以使用,包括 SVG/Base64/CSS Gradient 等格式。 2.border-image-slice 该属性是用来指定如何切割边框图片,它主要控制四条切割线对图片进行切割,切割成 9 块。如下图所示,共有上右下左四条线。
border-image-outset 设置边框图像超出边框的量。属性值：尺寸值border-width 的倍数 有四种设置方式，分别代表顶部、右侧、底部及左侧的 outset 值。border-image-repeat 设置边框图像的呈现方式。属性值：stretch 拉伸repeat 平铺round 类似于 repeat。无法平铺时，会对图像进行缩放 border-image-slice border-image-...
类似于CSS中的background(背景)属性。 例如:background:url(xx.jpg) 27px no-repeat;指的是图片(url(xx.jpg)),位置(27px),重复性(no-repeat)。 border-image与此类似,border-image包括图片,剪裁位置(与background位置一样,也是数值,也支持百分值),重复性。
border-image属性 针对上面情况,CSS3中增加了一个border-image属性,可以让处于随时变化状态的元素的长或宽的边框统一使用一个图像文件来绘制。 使用border-image属性,会让浏览器在显示图像边框时,自动将所使用到的图像分割为9部分进行处理,这样就不需要页面制作者再另外进行人工处理了。另外,页面中也不需要因此而使用...
border-image-outset:[ <length> | <number> ]{1,4} 不允许负值。 该属性用于指定边框图像向外扩展所定义的数值,即如果值为10px,则图像在原本的基础上往外延展10px再显示。 对应的脚本特性为borderImageOutset。 <' border-image-repeat '>: 设置或检索对象的边框图像的平铺方式。默认stretch ...