Heim > Artikel > Web-Frontend > So verwenden Sie die CSS-Eigenschaft „Border-Image-Source'.
So verwenden Sie die CSS-Eigenschaft „Border-Image-Source'.
- 青灯夜游Original
- 2019-05-30 11:38:513437Durchsuche
Das CSS-Attribut „border-image-source“ wird verwendet, um das zu verwendende Bild anzugeben, wodurch der im Attribut „border-style“ festgelegte Rahmenstil ersetzt wird. Wenn der Eigenschaftswert jedoch „none“ ist oder das Bild nicht angezeigt werden kann, ist auch ein Rahmenstil erforderlich.
Wie verwende ich die CSS-Eigenschaft „border-image-source“?
Das Attribut „border-image-source“ gibt das zu verwendende Bild an und überschreibt damit den im Attribut „border-style“ festgelegten Rahmenstil.
Syntax:
border-image-source: none|image;
Attributwert:
● none: Es wird kein Bild verwendet.
● Bild: Der Pfad des Bildes, das als Rahmen verwendet wird, eingebunden mit url().
Hinweis: Wenn der Wert „none“ ist oder das Bild nicht angezeigt werden kann, wird der Rahmenstil verwendet.
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="So verwenden Sie die CSS-Eigenschaft „Border-Image-Source'." >
</body>
</html>Rendering:
Das obige ist der detaillierte Inhalt vonSo verwenden Sie die CSS-Eigenschaft „Border-Image-Source'.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!