CSS中的边框图像

最新推荐文章于 2024-08-30 09:00:00 发布

cumt30111

最新推荐文章于 2024-08-30 09:00:00 发布

阅读量406

点赞数

文章标签： css css3 python html html5

原文链接：https://www.includehelp.com/code-snippets/border-images-in-css.aspx

版权

CSS | 边框图片 (CSS | Border Images)

The border-image property in CSS allows us to add an image as a border around an element. You can use this property to make your element more fancy and attractive.

CSS中的border-image属性允许我们将图像添加为元素周围的边框。您可以使用此属性使您的元素更加精美和迷人。

Element {
    border-image: source slice width outset repeat;
}

边框图像属性 (The border-image Property)

There are few border-image properties which we are going to discuss in detail,

我们将要讨论的边框图像属性很少，

border-image-source property
边框图像源属性
border-image-width property
border-image-width属性
border-image-outset property
border-image-outset属性
border-image-repeat property
边框图像重复属性
border-image-slice property
边框图像切片属性

Note: In the below examples, we are using an image named "border.png". So, while working using these examples, you need to change the name and location of your image file.

注意：在以下示例中，我们使用名为“ border.png”的图像。因此，在使用这些示例时，您需要更改图像文件的名称和位置。

1)border-image-source属性 (1) border-image-source property)

This property is used to specify the path of the image that we intend to use as a border of the element.

此属性用于指定我们打算用作元素边框的图像的路径。

Syntax:

句法：

Element{ 
	border-image-source: url(source location); 
}

Example:

例：

<!DOCTYPE html>

<html>

<head>
    <style>
        p {
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(border.png);
            border-image-slice: 30;
        }
    </style>
</head>

<body>
    <p>border image property</p>
</body>

</html>

Output

输出量

In the above example, the location is used for source image.

在上面的示例中，该位置用于源图像。

2)border-image-width属性 (2) border-image-width property)

This property is used to set the width of the border used around an element.

此属性用于设置元素周围使用的边框的宽度。

Syntax:

句法：

Element {
    border-image-width: 30px;
}

Example:

例：

<!DOCTYPE html>

<html>

<head>
    <style>
        p {
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(border.png);
            border-image-slice: 30;
            border-image-width: 20px;
        }
    </style>
</head>

<body>
    <p>border image property</p>
</body>

</html>

Output

输出量

In the above example, the width of the border image is 30px.

在上面的示例中，边框图像的宽度为30px 。

3)border-image-outset属性 (3) border-image-outset property)

This property specifies the distance by which an element border image is set out from its border-box. The border-image-outset can take from 1 to 4 values (left, right, top and bottom sides).

此属性指定元素边框图像从其边框开始设置的距离。 border-image-outset可以采用1到4个值( 左，右，上和下侧)。

Syntax:

句法：

Element {
    border-image-outset: 10px;
}

Example:

例：

<!DOCTYPE html>

<html>

<head>
    <style>
        p {
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(border.png);
            border-image-slice: 30;
            border-image-outset: 10px;
        }
    </style>
</head>

<body>
    <p>border image property</p>
</body>

</html>

Output

输出量

In the above example, 10px border-image-outset value is applied.

在上面的示例中，应用了10px border-image-outset值。

4)border-image-repeat属性 (4) border-image-repeat property)

This property specifies how the edge regions of the image are adjusted to fit the dimensions of an element's border-image.

此属性指定如何调整图像的边缘区域以适合元素的边框图像的尺寸。

Value stretch is the default value.

值拉伸是默认值。

border-image-repeat can take the following set of values,

border-image-repeat可以采用以下一组值，

repeat - It repeats the source image to fill the area.
重复 -重复源图像以填充区域。
stretch - It stretches the source image to fill the area.
拉伸 -拉伸源图像以填充该区域。
round - The image is rescaled so it fits if it does not fill the area with a whole number of tiles.
圆形 -图像经过重新缩放，因此如果图像上没有完整的瓷砖填充区域，则适合图像显示。
space - An extra space is distributed around the tiles if it does not fill the area with a whole number of tiles.
空间 -如果未将全部瓷砖填满该区域，则会在瓷砖周围分配额外的空间。

Syntax:

句法：

Element {
    border-image-repeat: repeat;
}

Example:

例：

<!DOCTYPE html>

<html>

<head>
    <style>
        p {
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(border.png);
            border-image-slice: 30;
            border-image-repeat: repeat;
        }
    </style>
</head>

<body>
    <p>border image property</p>
</body>

</html>

Output

输出量

In the above example, repeat value is applied for border-image-repeat property.

在上面的示例中，重复值应用于border-image-repeat属性。

5)border-image-slice属性 (5) border-image-slice property)

This property is used to divide the source image specified by the border-image-source property.

此属性用于划分border-image-source属性指定的源图像。

It divides the source image into,

它将源图像分为

9 regions
9个地区
4 corners
4个角
4 edges
4条边
A middle region
中部地区

Syntax:

句法：

Element {
    border-image-slice: 30px;
}

Example:

例：

<!DOCTYPE html>

<html>

<head>
    <style>
        p {
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(border.png);
            border-image-slice: 30;
        }
    </style>
</head>

<body>
    <p>border image property</p>
</body>

</html>

Output

输出量

Note: Remove the border-image-slice property to see the difference.

注意：删除border-image-slice属性以查看区别。

In the above example, 30px value is applied to the border-image-slice property.

在上面的示例中，将30px值应用于border-image-slice属性。

翻译自: https://www.includehelp.com/code-snippets/border-images-in-css.aspx

cumt30111

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS中的边框图像

CSS | 边框图片 (CSS | Border Images)The border-image property in CSS allows us to add an image as a border around an element. You can use this property to make your element more fancy and attractive. C...
复制链接

扫一扫