Différentes images de bordure haut et bas

J'essaie de faire un élément <div class="post"> avec différentes images de bordure supérieure et inférieure (pour donner l'impression d'une sorte de poche dans la page). Je peux me débarrasser des bordures latérales en utilisant les éléments suivants:Différentes images de bordure haut et bas

.post { 
    width: 980px; 
    border-image: url(./images/border-post-top.png); 
    border-width: 23px; 
    border-left-width: 0px !important; 
    border-right-width: 0px !important; 
}

Cependant, pour autant que je sache, il n'y a rien qui me permet de spécifier des bordures supérieure et inférieure. Ce ne serait pas un problème si la bordure du bas du <div> était tournée de 180 degrés ou reflétée dans l'axe des x, mais je ne peux pas le faire non plus. Y at-il un moyen de contourner ce problème, ou dois-je utiliser deux éléments distincts <img> au début et à la fin de mon élément post div pour y parvenir?

Source

2014-09-11 Thomas Russell

Placez les deux « parties » dans la même image, et utilisez [ 'border-image slice'] (https://developer.mozilla.org/ en-US/docs/Web/CSS/frontière-image-tranche) pour déterminer ce qui est affiché où. – CBroe

@CBroe Ahh à droite, j'ai raté cet attribut (je ne l'ai pas reconnu pour ce qu'il pourrait être); Merci beaucoup. Si vous en faites une réponse avec peut-être un exemple d'utilisation, alors je peux l'accepter! :) –

Placez les deux "parties" dans la même image et utilisez border-image-slice pour déterminer les éléments affichés.

Cette propriété vous permet de découper votre image en neuf «régions», dont les huit externes sont utilisés pour les bordures et leurs «coins», et la neuvième pour remplir l'arrière-plan de l'élément (ce dernier uniquement si mot-clé fill est défini).

Source

2014-09-11 18:37:38 CBroe

Désolé de vous déranger à nouveau, mais j'ai du mal à comprendre comment utiliser 'border-image-slice'. J'ai arrangé mon image de sorte que le haut '23px' de l'image soit la bordure supérieure et le bas' 23px' de l'image est la bordure inférieure et j'utilise '.post {border-image-slice: 23 0 23 0 ; border-image-width: 1 0 1 0; } 'Cependant, les deux frontières semblent être décalées et coupées incorrectement; Ai-je raison de penser que les quatre valeurs de l'attribut de coupe déterminent où l'image est "coupée"? –

Pouvez-vous créer un violon? http://jsfiddle.net/ – CBroe

Merci pour votre réponse rapide; J'ai découvert que j'étais un idiot et avait endommagé l'image, le CSS allait bien. Merci de votre aide!! –

Réponse y compris les préfixes des fournisseurs pour mixin ou whatnot

.post { 
    border-style: solid; 
    border-width: 23px 0 23px 0; 
    -moz-border-image: url(img/border-full.png) repeat; 
    -webkit-border-image: url(img/border-full.png) repeat; 
    -o-border-image: url(img/border-full.png) repeat; 
    border-image: url(img/border-full.png) repeat; 
    -moz-border-image-slice: 23 0 23 0; 
    -webkit-border-image-slice: 23 0 23 0; 
    -o-border-image-slice: 23 0 23 0; 
    border-image-slice: 23 0 23 0; 
    -moz-border-image-width: 1 0 1 0; 
    -webkit-border-image-width: 1 0 1 0; 
    -o-border-image-width: 1 0 1 0; 
    border-image-width: 1 0 1 0; 
}

Source

2017-09-05 16:24:42

Différentes images de bordure haut et bas

Répondre

Questions connexes