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('https://img.php.cn/upload/article/000/000/024/5c62637b1a4fe853.png');
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:
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
