Différences

Ci-dessous, les différences entre deux révisions de la page.

--- webdev:html_css:border-image [18/11/2015 18:01] – dolo
+++ webdev:html_css:border-image [16/01/2016 21:23] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 1: / Ligne 1: @@
+====== Bordure avec une image ======
+[[http://www.w3schools.com/css/css3_border_images.asp|Tuto W3C]]
+Les propriétés se comportent bizarrement ici, faire des tests. Il faut placer le border avant le border-image. Bien chercher avec slice et width.
+**Pour une image qui fait 1900 x 4 px, affichée en haut et en bas :**
+<Code:css>
+    border-top: 4px solid transparent;
+    border-bottom: 4px solid transparent;
+    border-image-repeat: stretch;
+    border-image-slice: 100% 50%;
+    border-image-width: 8px 100%;
+    border-image-outset: 0;
+    border-image-source: url(img/bandeau-degrade-1900.png);
+</Code>

Notes