recherche

Maison  >  Questions et réponses  >  le corps du texte

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

<p>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. </p> <pre class="brush:php;toolbar:false;">-webkit-border-radius : 5px; -webkit-border-image : -webkit-gradient(linear, 0 0, 0 100%, from(#b0bbc4), to(#ced9de)) 1 100%;</pre> <p>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 ? </p>
P粉824889650P粉824889650548 Il y a quelques jours552

répondre à tous(2)je répondrai

  • P粉418854048

    P粉4188540482023-08-22 18:31:09

    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.

    répondre
    0
  • P粉710454910

    P粉7104549102023-08-22 13:21:05

    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.

    répondre
    0
  • Annulerrépondre