CSS border-image All In One

CSS border-image All In One

.search-field[data-v-1822cd64] {
    position: relative;
    padding-bottom: 3px;
    white-space: nowrap;
    border: 0;
    border-bottom: 2px solid;
    -o-border-image: linear-gradient(141.27deg,#ff904e -4.24%,#ff5982 21.25%,#ec68f4 44.33%,#79e2ff 83.46%) 1 2;
    border-image: linear-gradient(141.27deg,#ff904e -4.24%,#ff5982 21.25%,#ec68f4 44.33%,#79e2ff 83.46%) 1 2;
    transition: all .3s;
}

.placeholder[data-v-1822cd64], .prefix--inactive[data-v-1822cd64] {
    color: hsla(0,0%,100%,.2);
    transition: all .3s;
}

*, :after, :before {
    box-sizing: border-box;
}


@media screen and (min-width: 50rem)
.form__body[data-v-75bb1c46] {
    font-size: 2rem;
}
.form__body[data-v-75bb1c46] {
    margin-bottom: 1.7rem;
    font-size: 1.75rem;
    word-break: break-word;
}

.layout[data-v-fae432fc] {
    min-height: 100vh;
    padding-top: 2.75rem;
    color: #fff;
    background: radial-gradient(92.01% 92.01% at 50%,at 7.99%,#231e43 0,#191630 86.98%,#15103e 100%);
    background: radial-gradient(92.01% 92.01% at 50% 7.99%,#231e43 0,#191630 86.98%,#15103e 100%);
}


@media screen and (min-width: 50rem)
body {
    font-size: 1.5rem;
}
body, html {
    font-size: 1rem;
}
html {
    color: #fff;
    font-family: Alliance No\ 2,sans-serif;
    line-height: 1.25;
    background: #1f1b3b;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

refs

https://stars.github.com/nominate/

https://developer.mozilla.org/en-US/docs/Web/CSS/border-image

https://css-tricks.com/almanac/properties/b/border-image/

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---