CSS3 边框图像

2024-05-09 10:00| 来源: 网络整理| 查看: 265

❮ 上一节下一节 ❯ CSS3 边框图像 CSS3 边框图像

通过使用 CSS border-image 属性，可以设置图像用作围绕元素的边框。

CSS3 border-image 属性

CSS border-image 属性允许您指定要使用的图像，而不是包围普通边框。

该属性有三部分：

用作边框的图像在哪里裁切图像定义中间部分应重复还是拉伸

我们将使用这幅图像（"border.png"）

border-image 属性接受图像，并将其切成九部分，就像井字游戏板。然后，将拐角放置在拐角处，并根据您的设置重复或拉伸中间部分。

注释: 为了使 border-image 起作用，该元素还需要设置 border 属性！

此处，重复图像的中间部分以创建边框：

图像作为边框！

这是代码：

实例 #borderimg { border: 10px solid transparent; padding: 15px; border-image: url(border.png) 30 round;} 亲自试一试 »

此处，图像的中间部分被拉伸以创建边框：

图像作为边框！

这是代码：

实例 #borderimg { border: 10px solid transparent; padding: 15px; border-image: url(border.png) 30 stretch;} 亲自试一试 »

提示: border-image 属性实际上是以下属性的简写属性：

border-image-source border-image-slice border-image-width border-image-outset border-image-repeat CSS3 border-image - 不同的裁切值

不同的裁切值会完全改变边框的外观：

实例 1：

border-image: url(border.png) 50 round;

实例 2：

border-image: url(border.png) 20% round;

实例 3：

border-image: url(border.png) 30% round;

这是代码：

实例 #borderimg1 { border: 10px solid transparent; padding: 15px; border-image: url(border.png) 50 round;}

#borderimg2 { border: 10px solid transparent; padding: 15px; border-image: url(border.png) 20% round;}

#borderimg3 { border: 10px solid transparent; padding: 15px; border-image: url(border.png) 30% round;}

亲自试一试 » CSS3 习题和测验测验 1 » 测验 2 » CSS3 边框图像属性属性描述 border-image 用于设置所有 border-image-* 属性的简写属性。 border-image-source 规定用作边框的图像的路径。 border-image-slice 规定如何裁切边框图像。 border-image-width 规定边框图像的宽度。 border-image-outset 规定边框图像区域超出边框盒的量。 border-image-repeat 规定边框图像应重复、圆角、还是拉伸。 ❮ 上一节下一节 ❯

【本文地址】

公司简介

联系我们