Home > Article > Web Front-end > How to use css border-image-source property

How to use css border-image-source property

青灯夜游Original: 2019-05-30 11:38:513421browse

css The border-image-source attribute is used to specify the image to be used, thereby replacing the border style set in the border-style attribute. But when the property value is "none", or if the image cannot be displayed, a border style is also required.

How to use the css border-image-source property?

The border-image-source attribute specifies the image to use, thereby overriding the border style set in the border-style attribute.

Syntax:

border-image-source: none|image;

Attribute value:

● None: Do not use images.

● Image: The path to the image used as the border, included using url().

Note: If the value is "none", or if the image cannot be displayed, the border style is used.

css border-image-source attribute Syntax

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style> 
div {
    border: 30px solid transparent;
    width: 200px;
    height: 50px;
    border-image-source: url(&#39;https://img.php.cn/upload/article/000/000/024/5c62637b1a4fe853.png&#39;);
    border-image-repeat: round;
    border-image-slice:30;
}
</style>
</head>
<body>
<div>DIV 使用图像边框</div>
<p>使用的图片:</p>
<img  src="https://img.php.cn/upload/article/000/000/024/5c62637b1a4fe853.png" alt="How to use css border-image-source property" >

</body>

</html>

Rendering:

How to use css border-image-source property

The above is the detailed content of How to use css border-image-source property. For more information, please follow other related articles on the PHP Chinese website!

css border

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use css border-image-slice propertyNext article：How to use css border-image-slice property

See more

How to use css border-image-source property

Related articles