border

English [?b?:d?(r)] US [?b?:rd?(r)]

n. bordure; bordure d'emballage

vt.& vi. le c?té de...

vt. Le long du c?té de..., autour de..., bordant...

vi Approximativement, adjacent à

Troisième personne du singulier : frontières Pluriel : frontières Participe présent : bordant Passé. temps : bordé Participe passé : bordé

image

英[??m?d?] 美[??m?d?]

n Image; portrait, intention miroir, image

vt. ; symbole

Troisième personne du singulier : images Pluriel : images Participe présent : imagerie Passé : imagé Participe passé : imagé

propriété CSS border-image syntaxe

Fonction?: Attribut d'abréviation, définit tous les attributs border-image-*.

Description?: L'attribut border-image est un attribut raccourci utilisé pour définir les attributs suivants?: border-image-source, border-image-slice, border-image-width, border-image-outset, border-image- répéter . Si une valeur est omise, sa valeur par défaut est définie.

Remarque?: Veuillez utiliser les propriétés border-image-* pour créer de magnifiques boutons évolutifs?!

propriété CSS border-image exemple

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
border:15px solid transparent;
width:300px;
padding:10px 20px;
}

#round
{
-moz-border-image:url(http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg) 30 30 round;	/* Old Firefox */
-webkit-border-image:url(http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg) 30 30 round;	/* Safari and Chrome */
-o-border-image:url(http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg) 30 30 round;		/* Opera */
border-image:url(http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg) 30 30 round;
}

#stretch
{
-moz-border-image:url(http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg) 30 30 stretch;	/* Old Firefox */
-webkit-border-image:url(http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg) 30 30 stretch;	/* Safari and Chrome */
-o-border-image:url(http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg) 30 30 stretch;	/* Opera */
border-image:url(http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg) 30 30 stretch;
}
</style>
</head>
<body>

<div id="round">在這里，圖片鋪滿整個(gè)邊框。</div>
<br>
<div id="stretch">在這里，圖片被拉伸以填充該區(qū)域。</div>

<p>這是我們使用的圖片：</p>
<img src="http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg">

<p><b>注釋：</b> Internet Explorer 不支持 border-image 屬性。</p>
<p>border-image 屬性規(guī)定了用作邊框的圖片。</p>

</body>
</html>

Exécuter l'instance ?

Cliquez sur le bouton ??Exécuter l'instance?? pour afficher l'instance en ligne