Estoy de estilo de un campo de entrada que tiene un borde redondeado (border-radius), y el intento de añadir un degradado a dicha frontera. Que puedo hacer con éxito el gradiente y el borde redondeado, sin embargo, ni trabajar juntos. Es redondeados sin degradado, o un borde con un degradado, pero no hay esquinas redondeadas.

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

Es de todos modos hay que tener ambas propiedades CSS trabajar juntos, o no es esto posible?

InformationsquelleAutor paulwilde | 2011-04-18

7 Comentarios

  1. 29

    Probablemente no sea posible, como por la especificación del W3C:

    Un cuadro de fondos, pero no su
    la frontera de la imagen, se recortan a la
    curva apropiada
    (según lo determinado por
    ‘background-clip’). Otros efectos que
    clip de la frontera o borde de relleno
    (tales como ‘desbordamiento’ otros que
    ‘visible’) también debe clip para el
    de la curva. El contenido de reemplazado
    los elementos siempre se recorta a la
    contenido borde de la curva. También, el área de
    fuera de la curva de la frontera de borde
    no acepta los eventos de ratón sobre el nombre
    del elemento.

    Esto es probable debido a que border-image puede tomar algunos potencialmente patrones complicados. Si desea una forma redondeada, borde de la imagen, tendrás que crear uno usted mismo.

    • Sí, supuse que no era posible, pero sólo quería asegurarme. La imagen es.
    • Gerben tiene un potencial de trabajo en su respuesta, aunque no agregar algunos extrenuous marcado.
    • Suena como una tontería para mí. Los navegadores pueden calcular (la máscara y colores para) un border-radius:10px; border-top:10px punteada azul; frontera-izquierdo:4px groove verde; pero no serán capaces de aplicar la misma máscara en la frontera de la imagen ?
    • Esta pregunta es de 6 años de edad en este momento. Mientras que todavía no es parte de la especificación AFAIK (así que aunque/a pesar de los navegadores podría, probablemente no), las cosas evolucionan y pueden ser más viables en la actualidad y las especificaciones pueden cambiar. Dicho esto, tenga en cuenta que las cosas que parecen simples, no siempre son tan fáciles de hacer, especialmente cuando la deuda técnica está involucrado.
  2. 88

    Esto es posible, y no requieren extra marcado, pero usa una ::después de, el pseudo-elemento.

                                       Posible usar border-radius junto con un borde de imagen que tiene una pendiente?

    Consiste en colocar un pseudo-elemento con un fondo degradado de abajo y el recorte que. Esto funciona en todos los navegadores actuales sin proveedor de prefijos o hacks (incluso IE), pero si quieres apoyar la vendimia de las versiones de IE, usted debe considerar de color sólido de funciones de javascript, y/o personalizados MSIE CSS extensiones (es decir, filtro, CSSPie-como la del vector engaño, etc).

    He aquí un ejemplo en vivo (jsfiddle versión):

    CSS:

    @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;
    }

    HTML:

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

    El extra de estilo de arriba es para mostrar:

    • Esto funciona con cualquier fondo
    • Funciona muy bien con box-shadow, inset o no
    • No requiere que usted agregue la sombra de un pseudo-elemento

    De nuevo, esto funciona con IE, Firefox y Webkit/Blink navegadores.

    • Funciona a la perfección en WebKit.
    • Sí, el punto es que esto funciona en todos los navegadores.
    • actualización a este viejo problema, me volví y estaba contento de encontrar una nueva solución 🙂
    • si bien técnicamente no es usando la propiedad border-image, se logra el efecto deseado. Muy bien hecho!
    • <3 muchas Gracias!!!
    • Si la pones en un <div> con el fondo, no funciona. ver violín: jsfiddle.net/osw11t96/344
    • añadido position:relative;z-index:-1 para el fondo y listo: jsfiddle.net/osw11t96/346
    • Esto es viejo, pero no, no funciona bien. Me gustaría hacerlo sin un adicional de color de fondo
    • ¿a qué te refieres, adicional un color de fondo? Usted significa que usted quiera que el div a ser transparente en el centro, y sólo tienen un gradiente en la frontera?
    • Funciona un poco, siempre y cuando usted no tiene la transparencia en el color de fondo =/
    • Esto debe ser aceptado respuesta.
    • Usted puede quitar background-clip: padding-box; y border: 4px solid transparent; de .grounded-radiants. Estos estilos son redundantes.
    • Buen intento. Pero añadir position:relative;z-index:-1 a los padres hacen prácticamente inutilizable.
    • De verdad que no. Usted puede tener los Padres con posición relativa, hijo div con el contenido(posición relativa) y antother niño elemento con posición absoluta. A continuación, se debe trabajar con el fondo establecido en cualquiera de ellos. Z-index todavía sería utilizado tho.
    • No funciona en la auto-etiquetas de cierre, tales como elementos de entrada, por desgracia.
    • Nota; utilizando con Bootstrap 4 requiere display: inline; y z-index: 1; en el elemento principal (.grounded-radiants).
    • ¿qué sucede cuando usted tiene un fondo transparente y realmente necesidad de una FRONTERA ? usted no consigue una frontera, se obtiene un fondo
    • No funciona en el actual Safari/Webkit (12.0.3) o Chrome/Blink (73.0.3683.86)

  3. 9

    De trabajo sobre este mismo problema y llegó a través de un no-svg solución que es más breve que los demás aquí:

    .rounded-color-border-element{
      width: 300px;
      height: 80px;
      border: double 4px transparent;
      border-radius: 80px;
      background-image: linear-gradient(white, white), radial-gradient(circle at top left, #f00,#3020ff);
      background-origin: border-box;
      background-clip: content-box, border-box;
    }

    Este no es mi propia solución, y ha sido tomado de aquí: https://gist.github.com/stereokai/36dc0095b9d24ce93b045e2ddc60d7a0

    • Esta es la mejor respuesta. Si usted está usando padding en su elemento, cambiar el background-clip propiedad padding-box, border-box.
  4. 2

    Lo que si se aplica el gradiente para el fondo. De y añadir un extra de div en el interior, con el margen establecido para la antigua frontera de ancho y con un fondo blanco, y por supuesto un borderradius. De esa manera usted tiene el efecto de una frontera, pero en realidad están utilizando de fondo, que se recorta correctamente.

    • Me gustaría añadir que, en lugar de la adición de tales marcas en el documento HTML, una persona podría hacerlo con JavaScript. De esa manera usted obtiene lo mejor de ambos mundos.
    • una vez que averiguar lo que está diciendo, esto es un simple & una manera obvia de hacerlo (añadiendo más marcado, sin embargo)
  5. 2

    Esto siempre funciona para mí en WebKit, aunque es un poco complicado!

    Básicamente, usted acaba de hacer de la frontera más grande que la máscara con pequeños y grandes pseudo-bordes del elemento : ).

    .thing {
      display: block;
      position: absolute;
      left: 50px;
      top: 50px;
      margin-top: 18pt;
      padding-left: 50pt;
      padding-right: 50pt;
      padding-top: 25pt;
      padding-bottom: 25pt;
      border-radius: 6px;
      font-size: 18pt;
      background-color: transparent;
      border-width: 3pt;
      border-image: linear-gradient(#D9421C, #E8A22F) 14% stretch;
    }
    .thing::after {
      content: '';
      border-radius: 8px;
      border: 3pt solid #fff;
      width: calc(100% + 6pt);
      height: calc(100% + 6pt);
      position: absolute;
      top: -6pt;
      left: -6pt;
      z-index: 900;
    }
    .thing::before {
      content: '';
      border-radius: 2px;
      border: 1.5pt solid #fff;
      width: calc(100%);
      height: calc(100% + 0.25pt);
      position: absolute;
      top: -1.5pt;
      left: -1.5pt;
      z-index: 900;
    }

    http://plnkr.co/edit/luO6G95GtxdywZF0Qxf7?p=preview

    • esto funciona muy bien si usted tiene un fondo de color sólido para ir en contra, pero en el interés de contar con borde redondeado-imagen en contra de un cambio de fondo (como un desplazamiento de la página en una estática bg) esto no va a funcionar.
  6. 2

    Me gustaría utilizar SVG para esto:

    HTML:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 220" width="100%" height="100%" preserveAspectRatio="none">
      <defs>
        <linearGradient id="gradient">
          <stop offset="0" style="stop-color:#0070d8" />
          <stop offset="0.5" style="stop-color:#2cdbf1" />
          <stop offset="1" style="stop-color:#83eb8a" />
        </linearGradient>
      </defs>
      <ellipse ry="100" rx="100" cy="110" cx="110" style="fill:none;stroke:url(#gradient);stroke-width:6;" />
    </svg>

    SVG puede ser utilizado como archivo independiente (método preferido) o como parte del valor de background (código de abajo sólo funcionará en webkit-navegadores):

    CSS:

    div {
      width: 250px;
      height: 250px;
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 220" width="100%" height="100%" preserveAspectRatio="none"><defs><linearGradient id="gradient"><stop offset="0" style="stop-color:#0070d8" /><stop offset="0.5" style="stop-color:#2cdbf1" /><stop offset="1" style="stop-color:#83eb8a" /></linearGradient></defs><ellipse ry="100" rx="100" cy="110" cx="110" style="fill:none;stroke:url(#gradient);stroke-width:6;" /></svg>');
    }

    HTML:

    <div></div>

    Para que esto funcione en MS Borde y Firefox nos debe escapar de nuestras marcas después de utf8, así que vamos a sustituir las comillas dobles " con comillas simples ', # con %23 y % con %25:

    CSS:

    div {
      width: 250px;
      height: 250px;
      background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220' width='100%25' height='100%25' preserveAspectRatio='none'><defs><linearGradient id='gradient'><stop offset='0' style='stop-color:%230070d8' /><stop offset='0.5' style='stop-color:%232cdbf1' /><stop offset='1' style='stop-color:%2383eb8a' /></linearGradient></defs><ellipse ry='100' rx='100' cy='110' cx='110' style='fill:none;stroke:url(%23gradient);stroke-width:6;' /></svg>");
      background-size: 100% 100%; /* Fix for Fifefox image scaling */
    }

    HTML:

    <div></div>

  7. 2

    Soluciones para transparente elementos:
    de trabajo, al menos en Firefox.

    De hecho, hay una manera que he encontrado sin pseudo clases, pero sólo funciona para los gradientes radiales:

    CSS:

    body {
      background: linear-gradient(white, black), -moz-linear-gradient(white, black), -webkit-linear-gradient(white, black);
      height: 300px;
      
      }
    
    div{
    text-align: center;
      width: 100px;
      height: 100px;
      font-size:30px;
      color: lightgrey;
      border-radius: 80px;
      color: transparent;
      background-clip: border-box, text;
      -moz-background-clip: border-box, text;
      -webkit-background-clip: border-box, text;
      background-image: radial-gradient(circle,
          transparent, transparent 57%, yellow 58%, red 100%), repeating-linear-gradient(-40deg, yellow,
      yellow 10%, orange 21%, orange 30%, yellow 41%);
      line-height: 100px;
    }

    HTML:

    <body>
    <div class="radial-gradient"> OK </div>
    </body>

    Llegar un elemento transparente con pseudo clases sólo he encontrado de esta manera – ok no es un degradado, pero es al menos una multicolor rayas de la frontera (aspecto de la vida de los anillos):

    CSS:

    body {
      background: linear-gradient(white, black, white);
      height: 600px;
      }
    
    div{
      position: absolute;
      width: 100px;
      height: 100px;
      font-size:30px;
      background-color:transparent;
      border-radius:80px;
      border: 10px dashed orange;
      color: transparent;
      background-clip: text;
      -moz-background-clip: text;
      -webkit-background-clip: text;
      background-image: repeating-linear-gradient(-40deg, yellow,
      yellow 10%, orange 11%, orange 20%, yellow 21%);
      text-align:center;
      line-height:100px;
    }
    
    
    div::after {
        position: absolute;
        top: -10px; bottom: -10px;
        left: -10px; right: -10px;
        border: 10px solid yellow;
        content: '';
        z-index: -1;
        border-radius: 80px;
        }

    HTML:

    <body>
    <div class="gradient"> OK </div>
    </body>

    con un svg (más satisfactorio en términos de variabilidad, pero las necesidades de la mayoría de los codelines demasiado):

    CSS:

    body{
      margin: 0;
      padding: 0;
    }
    
    div {
      position: absolute;
      display: flex;
      align-items: center;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
    }
    
    span {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 100px;
      height: 100px;
      line-height: 105px;
      font-size:40px;
      background-clip: text;
      -moz-background-clip: text;
      -webkit-background-clip: text;
      background-image: repeating-linear-gradient(-40deg, yellow,
      yellow 10%, orange 11%, orange 20%, yellow 21%);
      color: transparent;
    }
    
    svg {
      fill: transparent;
      stroke-width: 10px; 
      stroke:url(#gradient);
      
    }

    HTML:

    <head>
    
    </head>
    <body>
    
    <div>
    <span>OK</span>
      <svg>
        <circle class="stroke-1" cx="50%" cy="50%" r="50"/>
        <defs>
          <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="15%" gradientTransform="rotate(-40)" spreadMethod="reflect">
           
            <stop offset="0%" stop-color="orange" />
            <stop offset="49%" stop-color="orange" />
            <stop offset="50%" stop-color="yellow" />
            <stop offset="99%" stop-color="yellow" />
    
          </linearGradient>
      </defs>
      </svg>
      
    
    </div>
    
    </body>

Dejar respuesta

Please enter your comment!
Please enter your name here