How to use border-image-source attribute

青灯夜游
Release: 2019-02-12 15:04:19
Original
2990 people have browsed it

The border-image-source attribute specifies the image to use instead of the border style set by the border-style attribute.

How to use border-image-source attribute

CSS3 border-image-source attribute

Function: Requires The image used instead of the border style set in the border-style property.

Syntax:

border-image-source: none|image;
Copy after login

none: Indicates that no image is used.

image: Represents the path of the image used as the border.​

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

CSS3 border-image-source attribute usage example

<!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>
</body>
</html>
Copy after login

Rendering:

How to use border-image-source attribute

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

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template