Les dégradés de bordure sont-ils compatibles avec le rayon de bordure ?

Question

Je stylise une zone de saisie avec une bordure arrondie (border-radius) et j'essaie d'ajouter un effet de dégradé à la bordure. Je peux réussir à créer des bordures dégradées et arrondies, mais pas les deux en même temps. Soit il y a des coins arrondis mais pas de dégradé, soit il y a un dégradé mais pas de 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 pour que ces deux propriétés CSS prennent effet en même temps, ou n'est-ce pas possible ?

Answer 1

C'est possible et ne nécessite aucun balisage supplémentaire , mais l'utilisation d'un ::afterpseudo-élément .

                                                                                                

Il s'agit de placer un pseudo-élément avec un fond dégradé en dessous et de le recadrer. Cela fonctionne dans tous les navigateurs actuels sans préfixes de fournisseur ni hacks (même IE), mais si vous souhaitez prendre en charge les anciennes versions d'IE, vous devriez envisager d'utiliser une solution de secours en couleur unie, javascript et/ou une extension CSS MSIE personnalisée (c'est-à-dire

filter, vecteur astuces comme CSSPie, etc.).

Voici un exemple live (

version jsfiddle) :

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

html {
    /* 仅用于显示背景不需要是纯色的 */
    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;
    /* 仅用于显示box-shadow仍然正常工作 */
    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">
    这里有一些文本。<br/>
    这里甚至有一个换行！<br/>
    太酷了。
</p>

Style supplémentaire ci-dessus pour afficher :

Cela fonctionne sur n'importe quel arrière-plan
Ça va avec
• box-shadow一起工作得很好，无论是否使用inset
Pas besoin d'ajouter des ombres aux pseudo-éléments

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

Answer 2

Probablement pas possible, selon les spécifications du W3C :

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