border-image是用来定义元素边框图像的CSS属性。它接受一张图片作为参数,并将其应用到元素的边框上。 border-image属性有如下几个组成部分: - `border-image-source`: 定义边框图像的URL地址。 - `border-image-slice`: 定义边框的哪些部分应该被拉伸或平铺。可以通过一系列数值或关键字来指定。 - `border-image-...
接下来我们通过如下所示的图片来演示一下 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-repeat还可以使用关键字values,通过指定四个值来分别控制水平和垂直方向上的平铺方式。例如:border-image-repeat: round repeat; 分别表示水平方向上的平铺方式为round(平铺并缩放),垂直方向上的平铺方式为repeat(重复平铺)。 分别表示左边的平铺方式为repeat、上边的平铺方式为stretch、右边的平铺方式为round...
不允许使用负值。 sOutset 一个字符串,用于指定在边框外部绘制 border-image-area 的量。 sRepeat 一个字符串,用于指定以下值之一: stretch伸缩图像以填充该区域。 repeat重复图像以填充该区域 round重复图像以填充该区域。如果区域不是图像的整数倍,则会将图像重新缩放成合适的大小。 space重复图像以填充该区域...
border-image是 CSS 中的一个属性,用于使用图像作为元素的边框。这个属性提供了一种更灵活和自定义的方式来装饰元素的边框。 以下是一些与border-image相关的子属性: 1. border-image-source 用于指定用作边框图像的 URL。 如果未设置此属性或值为 none,则不会显示边框图像。
1. border-image/border-corner-imageborder-image 指定四边的图像,border-corner-image 指定四个角的图像,注意这里分开指定四条边和四个角的图片即需要使用8个图像。如下: 另外,每条边都可以指定三张图片: 2. border-fit/border-corner-fit指定 border-image/border-corner-image 的平铺方式。
使用代码: #exp{width:80px;border:2pxsolid transparent;border-image:url(rounded_corner.png);border-image-slice:5;border-image-outset:2px;background:gray;color:white; } 多边框效果 效果展示: 使用图片: 使用代码: #nexp{width:100px;border:10pxsolid gray;border-image:url(border_round.png);borde...
border-image-source: linear-gradient(red, blue); border-image-slice: 20; 于是又采用另外一种方式来引用border-image ,这种方式实现的border-image能够将window窗口包裹住,并且当拉大窗口或者最大化时border-image也随之拉大,只是采用的方式是重复平铺的方式(若是将border-image图片使用边框一样的图案,则不会感...
1、通过border-image-source属性来指定使用的边框图像。 2、通过border-image-slice属性将边框图像切割为9个部分:4个角部,4条边部和一个中心块,如下图所示: 3、然后对9个边框图像切片进行缩放、定位和平铺操作: 图像切片会根据border-image-width属性指定的值进行缩放。
border-image-source border-image的背景图使用url()调用,图片可以是相对路径或是绝对路径,也可以不使用图片,即border-image:none; 这里有个点要注意:如果存在border-image属性并且图片不是none的话,border-style 会失效。 举例 width: 200px; height: 200px; ...