Attribut Border-Image-Outset CSS - Maxime GUINARD

Développement indépendant

0 Comments

Rôle de l’attribut border-image-outset en CSS3

L’attribut border-image-outset permet d’étendre la bordure au-delà du bord du conteneur HTML.

Cet attribut peut prendre plusieurs valeurs possibles :

4 valeurs pour gérer les extensions des bordures séparément :
border-image-outset: 10px 20px 10px 20px;
3 valeurs : la quatrième valeur (bordure de gauche) a la même valeur que la deuxième valeur (bordure de droite) :
border-image-outset: 10px 20px 10px;
2 valeurs : la première pour les bordures haut-bas, la deuxième pour les bordures droite-gauche :
border-image-outset: 10px 20px;
1 même valeur pour les quatre bordures :
border-image-outset: 10px;

Version : CSS3

Héritage (inherit) : non

Propriété Javascript : element.style.borderImageWidth

Testez vous-même cet attribut

Utilisez Codepen.

Le code CSS

            body {                 padding: 10px;             }             div {                 background-color: silver;                 width: 310px;                 height: 100px;                 padding: 20px;                 border: solid 10px transparent;                 border-image-source: url(//tutowebdesign.com/images/border-image-css.jpg);                 border-image-outset: 20px;                 border-image-repeat: round;                 border-image-outset: 30px 40px;                 border-image-outset: 5px;             }

Le code HTML

            <section></section>             <div>Le développement web est l'art de créer et de maintenir des sites web, des applications web et d'autres solutions en ligne qui enrichissent notre expérience numérique.</div>             <img src="https://tutowebdesign.com/images/border-image-outset-css.jpg" alt="">

Résultat

La bordure rouge représente les bords du conteneur HTML

Compatibilité

L’attribut border-image-outset est pris en charge par les versions récentes des principaux navigateurs

Valeurs

Les différentes valeurs de l’attribut border-image-outset sont :

length: La distance par rapport au bord. La valeur par défaut est 0. Syntaxe : border-image-outset: 20px;
nombre: Valeur par défaut 1. Un nombre qui correspond à un multiple d’une largeur de bordure spécifiée. Syntaxe : border: 20px solid transparent; border-image-outset: 1 2;
initial: Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité. Syntaxe : border-image-outset: initial;
inherit: Hérite de la même propriété que l’élément parent. Syntaxe : border-image-outset: inherit;

Maxime GUINARD

Maxime GUINARD

Merci d'avoir lu cet article. Je suis un développeur web WordPress passionné, et j'ai créé ce contenu avec soin pour vous offrir des informations de qualité. Restez connectés pour plus de conseils et d'astuces !

Avantages	Inconvénients
Permet de spécifier l’espace entre la bordure et l’image de bordure	Peut ne pas être pris en charge par tous les navigateurs
Facilite la personnalisation des propriétés d’image de bordure	La compatibilité avec les versions antérieures peut être un problème
Contribue à créer des effets visuels intéressants avec les bordures	Doit être utilisé avec discernement pour éviter des conceptions trop complexes
Améliore la flexibilité dans la conception de bordures créatives	La syntaxe peut nécessiter une certaine compréhension approfondie

Les autres références PHP : Selecteur out-of-range Écran CSS, Balise address HTML, Balise ins HTML, Balise time HTML, Attribut Border-Image-Outset CSS, Selecteur, Proximite CSS, Expressions Regulieres PHP, Extraction Chaine PHP, Instruction Affichage PHP, Attribut font-face CSS, Attribut filter CSS, Attribut vertical-align CSS, Événement javascript, SetTimeout Javascript, prototype javascript.

      
   Maxime GUINARD | Développeur & Webdesigner WordPress indépendant
   148 avis Google 
  Écrire un avis 
  
 
 
   
 
 
        
   Myriam SRIKANTHA 
 2023-12-21
 
 
  Maxime GUIMARD a pris le temps de présenter son métier, auprès de mes classes de lycéen.  Présentation efficace, claire et compréhensible. Il a été à l’écoute des questions des lycéens.  Un grand merci à lui d’avoir pris le temps d’expliquer sa passion !
  
 
       
   Philippe BERTIEAUX 
 2023-10-01
 
 
  Maxime a une capacité que peu de SEO managers ont à ce jour ; celle de pouvoir s'adapter de manière extrêmement rapide et d'une manière particulièrement efficace, à toutes situations techniques inconfortables, mêmes les plus délicates. Le résultat est toujours au rendez-vous. Merci Maxime.
  
 
       
   Cuong Doan 
 2023-09-30
 
 
  J'ai travaillé avec Maxime sur un projet d'optimisation, où nous avons indexé les pages sur Google Search Console et effectué des corrections techniques en SEO. Il a réussi à résoudre tous les problèmes. Il est toujours disponible pour répondre à toutes les questions, très professionnel. C'était un plaisir de travailler avec lui ????????????.
  
 
       
   Artus Trézières 
 2023-09-30
 
 
  J'ai adoré travailler avec Maxime. Il est à l'écoute, gentil, et très compétent. De plus, il travaille extrêmement bien. Je le recommande vivement !
  
 
       
   Romain Knockaert 
 2023-09-01
 
 
  J'ai commandé auprès de Maxime une base pour un serveur Garry's Mod, n'ayant ni les compétences nécessaires ni le temps, il m'a aidé et m'a fourni une base propre avec des addons qu'il a fait lui-même pour un prix plus que raisonnable ! Grâce à lui j'ai pu gagner beaucoup de temps pour l'exécution de mon projet 🙂 je recommande !
  
 
       
   maha 
 2023-08-27
 
 
  Maxime GUINARD se distingue vraiment en tant que développeur web indépendant de haut calibre ! Sa maîtrise du développement WordPress et du design web est tout simplement impressionnante. Je suis extrêmement satisfaite de la qualité de son travail et je n'ai aucune hésitation à le recommander chaudement. Il mérite amplement toutes les étoiles possibles, soit 5 étoiles sans aucun doute !
  
 
       
   Nathou M 
 2023-05-24
 
 
  Super !
  
 
       
   Mario Mario 
 2023-05-24
 
 
  Super site web
  
 
       
   Mitsuko 
 2022-07-14
 
 
  Hello,  Maxime ma fait un super site web et aussi une carte en 3D ! J'ai passé 6 mois avec Maxime pour le tout. J'ai eu la chance de faire de superbes rencontres et de découvrir Maxime. Quelqu'un de dévouée et super bienveillant qui m'a permis de grandir et de m'accompagner tout au long de ma commande. Maxime est à l'écoute !
  
 
       
   M Mestchersky 
 2022-04-11
 
 
  Maxime is an excellent web developer and SEO consultant. Need any SEO advice? He is the one you're looking for.

Adresse

Avenue du bac
94210 SAINT MAUR DES FOSSES

Téléphone

06.65.13.24.36

Emails

dev@maxime-guinard.fr maxime.guinard.pro@gmail.com