CSS3 border-image 详解

最新推荐文章于 2024-08-20 16:34:09 发布

光英的记忆

最新推荐文章于 2024-08-20 16:34:09 发布

阅读量4.1k

点赞数 3

分类专栏：小程序-web

本文链接：https://blog.csdn.net/qq_29678299/article/details/112918722

版权

小程序-web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

border-image用于给border（边框）贴上背景图像

有哪些属性：

图片描述

border-image的主要参数就是上面提到的三个：图片，剪裁位置，重复性。

对于border-image而言，border-image-souce是唯一必需的。若无特殊指定，其他属性即为默认值。以下为border-image包含的属性：

border-image-source 图片第一个参数

{border-image-source: url(border.png);}

border-image-slice 第二个参数剪裁位置可以接受数值百分比 4个如果是1个值那4个值复用相同 2个值分别表示上下左右2个值

module{border-image-source: url(border.png);border-image-slice: 20;}

例子

图片描述

border-image:url(biankuang.png) 30% 30%

假如参数值是30% 那么这张图片会把整个图片切成9块分别4个角 4个角会放在边框的4个角 4条边图片分别作为边框的4条边还有中心图片默认舍弃源图片的中心块。一旦使用了fill关键字，源图片的中心块将作为该元素的背景

border-image-repeat 重复性第三个重要参数

该属性控制图片填充边框区域的重复方式。

可以为该属性指定最多两个值。如果值为1个，在边框的竖直方向和水平方向均应用该值。如果指定了两个值，第一个值应用于边框水平方向，第二个值应用于边框竖直方向。

属性值

stretch: 初始值。边框图片被拉伸以填充区域。

repeat: 图片平铺以填充区域，必要时每个部分会用多个图片块填充。

round: 图片平铺以填充区域，若有必要避免每个部分用多个图片块填充，图片会被重新缩放，然后进行填充。

space: 图片平铺以填充区域。如果区域无法用整片图片填满，在每部分之间会加入空隙以填满区域。注意，该属性值并非所有浏览器都支持。

其他2个参数不常使用

border-image-width

 .module{border-image-source: url(border.png);border-image-slice: 20;border-image-width: 20;}

该属性指定了边框图片的宽度。属性值可以是百分比，不带单位的正数，或者是关键字auto.

该属性值规定了元素上部，右部，下部，左部的边框图片宽度。若缺少一个值，则取对边的值。

对该属性而言，百分比数值与边框图片区域的大小有关，而无单位数值将与border-width相乘。

属性的初始值为1，所以若该属性值未设置，但该元素设置了border或border-width属性,边框图片会依照这两个属性值进行绘制。

auto关键字告诉浏览器，可自动选择border-image-slice(如果可用的话)或border-width属性的值。

border-image-outset

 .module{border-image-source: url(border.png);border-image-slice: 20;border-image-width: 20;}

该属性值指定了边框图像区域从边框盒子向外延伸的距离。初始值为0。该属性接受最多4个为正的长度值或无单位数字。长度值即为向外延伸的确定距离，无单位数字则要与边框宽度相乘得到向外延伸距离，这与**border-image-width**属性值为无单位数字的情况类似。

立志

<!DOCTYPE html>
<html>
<head>
<style> 
div
{

border:15px solid transparent;
width:500px;
padding:10px 20px;
}

#round
{
-moz-border-image:url(biankuang.png) 30% 30% round;	/* Old Firefox */
-webkit-border-image:url(biankuang.png) 30% 30% round;	/* Safari and Chrome */
-o-border-image:url(biankuang.png) 30% 30% round;		/* Opera */
border-image:url(biankuang.png) 30% 30% round;
}

#stretch
{
-moz-border-image:url(biankuang.png) 30% 30% stretch;	/* Old Firefox */
-webkit-border-image:url(biankuang.png) 30% 30% stretch;	/* Safari and Chrome */
-o-border-image:url(biankuang.png) 30% 30% stretch;	/* Opera */
border-image:url(biankuang.png) 30% 30% stretch;
}

</style>



</head>
<body>

<div id="round">在这里，图片铺满整个边框。</div>
<br>

<br>
<div id="stretch">在这里，图片被拉伸以填充该区域。</div>


<p>这是我们使用的图片：</p>
<img src="biankuang.png">

<p><b>注释：</b> Internet Explorer 不支持 border-image 属性。</p>
<p>border-image 属性规定了用作边框的图片。</p>

</body>
</html>