À propos de l'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 la bordure d'image CSS3 border-image, qui a une certaine valeur de référence. Ceux qui sont intéressés peuvent en savoir plus sur

l'attribut CSS border. , je pense que tous les développeurs WEB le connaissent très bien. 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 d'image de bordure, mais il y a encore très peu d'images d'image de bordure sur Internet, je pense que c'est principalement parce que Google Chrome et Firefox les prennent en charge depuis longtemps, et IE11 ne prend en charge que cette syntaxe.

La syntaxe de border-image

<&#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 ennuyeuses. Tout le monde aime voir des exemples. pour comprendre. Donnons ci-dessous quelques exemples.

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 1 :

Bordure d'image bordure-image Utilisation 2 : Mosaïque de boucle adaptative d'image de bordure (ronde)

Vous avez peut-être vu que même si la bordure d'image ci-dessus est très belle, il y a un défaut. , lorsque la largeur ou la hauteur de l'élément n'est pas un multiple entier de l'image de bordure, la dernière/première image ne peut pas être affichée complètement 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 la qualité de visualisation.

<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 border-image Utilisation 3 : étirement et mosaïque de l'image de bordure (étirement)

'étirement' s'étire, ce qui étire la petite image pour remplir la zone de bordure, évidemment. l'image de la 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 3

Évidemment, border-image Le premier usage ne doit pas être utilisé couramment, car parfois cela donnera à la bordure une impression incomplète. 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 dans l'exemple de l'article précédent, je vous le montrerai à nouveau ci-dessous.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Utilisez le rayon de bordure de CSS3 pour dessiner des motifs de Tai Chi et d'amour

@keyframes dans CSS3 Implémentation de l'animation

À propos de la méthode d'affichage centré réactif de l'image de la bannière CSS

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!