Explication détaillée des exemples d'utilisation de la bordure d'image CSS3 border-image

Parmi les nombreuses nouvelles fonctionnalités introduites dans CSS3, cet article présente principalement l'utilisation de css3pictureborder-image, qui a une certaine valeur de référence. Ceux qui sont intéressés peuvent en apprendre davantage

Je pense que tous les développeurs WEB connaissent très bien la bordure des attributs CSS. Nous pouvons définir la largeur, la couleur et le style de la bordure de l'

élément HTML pour que l'élément HTML affiche différentes bordures, telles que des lignes doubles, des lignes pointillées et des lignes pointillées. Mais quelle que soit la façon dont vous le configurez, ce sont des pratiques assez primitives. À partir de CSS3, nous avons une nouvelle propriété : border-image , qui permet d'entourer les éléments HTML de belles petites images, apparaissant comme des bordures d'image. Avec la propriété border-image, nous pouvons créer de très beaux styles de bordure.

Parmi les nombreuses nouveautés introduites dans CSS3, comme les nouveaux types de saisie en HTML5, les polices chinoises (polices web), les espaces réservés, etc., elles sont très pratiques et populaires, et nous avons également cité une très belle un avant Exemples de border-image, mais il y a encore très peu de gens qui utilisent les bordures d'image border-image sur Internet, je pense que c'est principalement parce que Google Chrome et

Firefox les supportent depuis longtemps, alors que. IE11 ne les prend en charge que ce type de syntaxe.

La syntaxe de border-image

Le code est le suivant :

<&#39;border-image-source&#39;> || <&#39;border-image-slice&#39;> [ / <&#39;border-image-width&#39;> | / <&#39;border-image-width&#39;>? / <&#39;border-image-outset&#39;> ]? || <&#39;border-image-repeat&#39;>

Ces descriptions de syntaxe semblent très C'est ennuyeux. Tout le monde aime voir des exemples les plus faciles à comprendre. Prenons quelques exemples ci-dessous.

Bordure d'image border-image Utilisation 1 : Mosaïque cyclique de l'image de bordure (répétition)

Dans ce cas, les images d'image de bordure seront carrelées en séquence et remplies zone frontalière.

<p id="repeat">图片将会循环贴满边框区域</p>

#repeat { 
  border: 15px solid transparent;
  padding: 10px 20px;
  -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old Firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 repeat;
}

Exemple de démonstration1 :

Bordure d'image border-image Utilisation 2 : Boucle adaptative d'image de bordure Tuile (rond)

Vous avez peut-être vu que même si la bordure de l'image ci-dessus est très belle, il y a un défaut, c'est-à-dire lorsque la largeur ou la hauteur de l'élément n'est pas un multiple entier de la bordure image, la dernière/ième image ne peut pas être entièrement affichée et sera partiellement bloquée, ce qui semble très inesthétique. Les concepteurs de CSS3 ont déjà envisagé ce problème, et l'utilisation de la valeur de l'attribut round peut éviter cette situation. La fonction du rond est d'ajuster légèrement l'image de bordure pour garantir que chaque image peut être affichée, ce qui augmente le plaisir visuel.

<p id="round">图片将会贴满边框区域</p>

#round { 
  border: 15px solid transparent;
  padding: 10px 20px;
  -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old Firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 round;
}

Exemple de démonstration 2

Bordure d'image bordure-image Utilisation 3 : étirement et mosaïque de l'image de bordure (étirement)

« étirer » signifie étirer, qui étire la petite image pour remplir la zone de bordure sans faire de boucle. Évidemment, l'image de bordure sera déformée.

<p id="stretch">图片将会拉伸贴满边框区域.</p>

#stretch { 
  border: 15px solid transparent;
  padding: 10px 20px;
  -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old Firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 stretch;
}

Exemple de démonstration 3

Évidemment,

La première utilisation doit être peu courante, car parfois elle provoquera des frontières Il y a une sensation de incomplétude. Les deuxième et troisième usages ont leurs propres mérites et des beautés différentes. L’image de bordure utilisée ici est en réalité très simple. Un art exquis peut créer de plus belles images de bordure et produire des effets étonnants, comme l'exemple de l'article précédent, que je vous montrerai à nouveau ci-dessous. border-image

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!