Image de bordure supérieure dans CSS3
J'ai utilisé border
border-top-image
border-image
et aucune ne semble faire ce que je suis après.
J'ai le code CSS suivant:
#footer {
overflow: hidden;
clear: both;
width: 100%;
margin: 0 auto;
padding: 26px 0 30px 0;
border-top-image: url('http://www.mycelticcrossstitch.com/celtic%20knot%20cross%20stitch.jpg');
font-size: 0.8461538461538462em;
color: #aaa;
}
Cela ne semble pas s'appliquer pour le site que je suis en train de travailler sur, je l'ai essayé sous Firefox et Chrome.
Je veux seulement que l'image apparaisse sur la bordure du haut et que vous souhaitez avoir pas d'autres frontières (donc c'est un peu comme un <hr />
)
source d'informationauteur Dean | 2012-06-12
Vous devez vous connecter pour publier un commentaire.
Je ne pense pas qu'il existe une telle propriété comme
border-top-image
pour donner l'image de la frontière d'un côté de l'élémentUtilisation
mais il donne de la frontière autour de tous les côtés. Pour supprimer la bordure autour du reste de l'côtés j'ai donné -
Il a travaillé et voici mon violon http://jsfiddle.net/ashwyn/c7WxG/1/
Il est le
border-image-width: a b c d;
de la propriété. Les détails:a-d
sont les largeurs de haut, droite, bas et gauche frontières, respectivement[x]px
[x]
- multiples de la frontière valeur de la largeur de[x]%
pour cent de la tranche d'image (s'affiche non-travail dans Safari 7)auto
- dériver à partir de la largeur de l'image correspondante tranche1
.d
la valeur deb
est utilisé pour la gauche, la largeur de la bordurec
la valeur dea
est également utilisé pour le fond de la largeur de bordureb
la valeur dea
est utilisé pour toutes les frontières 🙂Donc, pour votre exemple, vous pourriez utiliser:
Sinon le
border-image
abréviation de la propriété comprendborder-image-width
comme un paramètre, donc en une seule ligne de CSS:Il utilise la totalité de l'image pour la tranche supérieure ("100% 0 0 0"), et l'applique à la frontière supérieure à la largeur désirée.
Une autre SOLUTION - créer des visuels "AVANT" phseudo-élément :
La frontière de l'image est spécifiée comme un URI, par deux groupes différents:
L'URI de jusqu'à trois images peuvent être spécifiées pour chacune des quatre arêtes de bordure. Si une image URI est donnée, la première tuile est centré sur la ligne de frontière. Si deux images Uri sont donnés, ils se réunissent au centre de la ligne de frontière avec la première image placée sur le haut du côté gauche ou du centre. Si trois d'image Uri sont donnés, le second devient le centre et n'a pas de vignette. Les deux autres sont placés de chaque côté de l'image du centre, avec le premier passant sur le dessus du côté gauche ou du centre, et le troisième va sur la droite ou en bas.
De plus, référez-vous w3.org