jak vytvořit barevný přechod v okraji prvku

css3 gradient v border

Tvořit barevné přechody není složité, i na tomto webu je o nich článek, protože je lze generovat. Jenže jak je použít ve vlastnosti "border"? Lze to vůbec? A pokud ano tak jak?

Zásadní vlastnost pro vytvoření přechodu v okraji daného bloku je vlastnost "border-image", která funguje pouze na obdelníkové ("hranaté") tvary či bloky. Tudíž použití v kombinaci s vlastností "border-radius" může nastat odlišný výsledek.

.box{
  width: 250px;
  height: 250px;
  background: #eee;
  border: 20px solid transparent;
  -moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
  -webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
  border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
  border-image-slice: 1;
}

Přechod z leva do prava by byl:

-moz-border-image: -moz-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%);
-webkit-border-image: -webkit-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%);
border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);

border-image-slice: 1;

Přechod "diagonálně" by byl:

-moz-border-image: -moz-linear-gradient(top left, #3acfd5 0%, #3a4ed5 100%);
-webkit-border-image: -webkit-linear-gradient(top left, #3acfd5 0%, #3a4ed5 100%);
border-image: linear-gradient(to bottom right, #3acfd5 0%, #3a4ed5 100%);

border-image-slice: 1;

<< zpět