Puis-je utiliser le rayon de bordure avec des images de bordure avec des dégradés ?

Question

Je conçois un champ de saisie avec une bordure circulaire (rayon de la bordure) et j'essaie d'ajouter un dégradé à ladite bordure. Je peux réussir à créer des dégradés et des bordures circulaires, mais aucun des deux ne fonctionne ensemble. Il s'agit soit de coins arrondis sans dégradé, soit d'une bordure avec un dégradé mais sans coins arrondis.

-webkit-border-radius : 5px;
-webkit-border-image : -webkit-gradient(linear, 0 0, 0 100%, from(#b0bbc4), to(#ced9de)) 1 100%;

Existe-t-il un moyen de faire fonctionner deux propriétés CSS ensemble, ou n'est-ce pas possible ?

Answer 1

C'est possible, et cela ne nécessite aucun balisage supplémentaire mais utilise ::after pseudo-éléments .

                                                                                              

Il s'agit de placer un pseudo-élément avec un fond dégradé en dessous et de le recadrer. Cela fonctionne pour tous les navigateurs qui n'ont actuellement pas de préfixes de fournisseur ou de hacks (même IE), mais si vous souhaitez prendre en charge les versions rétro d'IE, vous devriez envisager des solutions de secours en couleurs unies, du javascript et/ou des extensions CSS MSIE personnalisées (c'est-à-dire

过滤器 , CSSPie - comme l'usurpation d'identité vectorielle, etc.).

Voici un exemple (

version jsfiddle) :

@import url('//raw.githubusercontent.com/necolas/normalize.css/master/normalize.css');

html {
    /* just for showing that background doesn't need to be solid */
    background: linear-gradient(to right, #DDD 0%, #FFF 50%, #DDD 100%);
    padding: 10px;
}

.grounded-radiants {
    position: relative;
    border: 4px solid transparent;
    border-radius: 16px;
    background: linear-gradient(orange, violet);
    background-clip: padding-box;
    padding: 10px;
    /* just to show box-shadow still works fine */
    box-shadow: 0 3px 9px black, inset 0 0 9px white;
}

.grounded-radiants::after {
    position: absolute;
    top: -4px; bottom: -4px;
    left: -4px; right: -4px;
    background: linear-gradient(red, blue);
    content: '';
    z-index: -1;
    border-radius: 16px;
}

<p class="grounded-radiants">
    Some text is here.<br/>
    There's even a line break!<br/>
    so cool.
</p>

Le style supplémentaire ci-dessus sert à montrer :

Cela fonctionne sur n'importe quel arrière-plan
Fonctionne bien avec ou sans
• box-shadow、inset
Pas besoin d'ajouter une ombre aux pseudo-éléments

Encore une fois, cela fonctionne dans les navigateurs IE, Firefox et Webkit/Blink.

Answer 2

Selon les spécifications du W3C, cela n'est peut-être pas possible :

Cela peut être dû au fait que border-image certains modèles potentiellement complexes peuvent être adoptés. Si vous souhaitez une bordure d'image circulaire, vous devrez en créer une vous-même.