I managed to successfully create a design using the CSS properties border-image and linear-gradient. However, I am struggling to understand the syntax involved. While I grasp the concept that the series of colors defines the gradient transition, as well as the direction indicated by the first value, the 1 25% at the end perplexes me. Despite experimenting with different values and to bottom right, the relationship between them still eludes me. Could someone clarify the meaning behind each value?
If possible, I would appreciate learning how to achieve the same effect with the -webkit-, -moz-, and -o- versions. Extra points if you can also demystify those syntaxes.
.box {
width: 100px;
height: 100px;
border-image: linear-gradient(to bottom right, black, white, black, white, black) 1 25%;
/* -webkit-border-image: -webkit-gradient(linear, 0 0, 100% 100%, from(black), to(white)) 1 100%;
-webkit-border-image: -webkit-linear-gradient(black, white, black, white, black) 1 100%;
-moz-border-image: -moz-linear-gradient(black, white) 1 100%;
-o-border-image: -o-linear-gradient(black, white) 1 100%; */
}<div class="box"></div>