Domanda È possibile utilizzare il raggio del bordo insieme a un'immagine del bordo con una sfumatura?


Sto disegnando un campo di input che ha un bordo arrotondato (raggio-bordo) e sta tentando di aggiungere un gradiente a detto bordo. Posso creare con successo il gradiente e il bordo arrotondato, ma nessuno dei due lavora insieme. È arrotondato senza gradiente o con un bordo con una sfumatura, ma senza angoli arrotondati.

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

Esiste comunque la possibilità che entrambe le proprietà CSS funzionino insieme o non è possibile?


44
2018-04-18 18:04


origine


risposte:


Probabilmente non è possibile, secondo le specifiche del W3C:

Gli sfondi di una scatola, ma non i suoi   border-image, sono ritagliati sul   curva appropriata (come determinato da   ‘Background-clip’). Altri effetti che   agganciare il bordo o il bordo di riempimento   (come "overflow" diverso da   'Visibile') deve anche agganciare a   curva. Il contenuto di sostituito   gli elementi sono sempre tagliati a   curva del bordo del contenuto. Inoltre, l'area   fuori dalla curva del bordo del bordo   non accetta eventi del mouse per conto   dell'elemento.

Questo è probabile perché border-image può prendere alcuni schemi potenzialmente complicati. Se desideri un bordo immagine arrotondato, dovrai crearne uno tu stesso.


27
2018-04-18 18:30



Questo è possibile, e non richiede markup extra, ma usa un ::after pseudo-elemento.

screenshot

Implica mettere uno pseudo-elemento con uno sfondo sfumato qui sotto e ritagliarlo. Funziona in tutti i browser correnti senza prefissi o hack del fornitore (anche IE), ma se vuoi supportare versioni vintage di IE, dovresti prendere in considerazione i fallback di colore solido, javascript e / o le estensioni CSS MSIE personalizzate (ad es. filter, Trucchi vettoriali simili a CSSPie, ecc.).

Ecco un esempio dal vivo (versione 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>

Lo stile in più sopra riportato è quello di mostrare:

  • Funziona con qualsiasi background
  • Funziona bene con box-shadow, inset o no
  • Non richiede di aggiungere l'ombra allo pseudo-elemento

Ancora una volta, questo funziona con IE, Firefox e browser Webkit / Blink.


76
2018-03-24 02:08



Cosa succede se si applica il gradiente allo sfondo. Poi aggiungi un div extra all'interno, con il margine impostato sul vecchio bordo-larghezza e con uno sfondo bianco, e ovviamente un valore borderradius. In questo modo hai l'effetto di un bordo, ma in realtà stai usando lo sfondo, che viene ritagliato correttamente.


2
2018-04-18 18:46



Funziona sempre per me in WebKit, anche se è un po 'complicato!

In pratica si limita a rendere il bordo più grande e poi lo si maschera con bordi pseudo-elementi più grandi e più piccoli:).

.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


2
2017-11-12 04:57



Vorrei usare SVG per questo:

<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 può essere usato come file separato (modo preferito) o come parte di valore di background (il codice seguente funzionerà solo nei browser Webkit):

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>');
}
<div></div>

Per far funzionare in MS Edge e Firefox dovremmo sfuggire al nostro markup dopo utf8, quindi sostituiremo le virgolette doppie " con virgolette singole ', # con %23 e % con %25:

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 */
}
<div></div>


2
2018-06-22 08:52



Soluzioni per trasparente elementi: funziona almeno in Firefox.

C'è in realtà un modo che ho trovato senza pseudo classi - ma funziona solo per i gradienti radiali:

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;
}
<body>
<div class="radial-gradient"> OK </div>
</body>

Ottenere un elemento trasparente con le pseudo classi l'ho trovato solo in questo modo - ok non è un gradiente, ma è almeno un bordo a strisce multicolore (simile ad anelli di salvataggio):

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;
    }
<body>
<div class="gradient"> OK </div>
</body>

con uno svg (il più soddisfacente in termini di variabilità ma necessita anche della maggior parte dei codeline):

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


1
2018-03-08 17:26



Questa alternativa è abbastanza nuova: https://github.com/bfintal/jQuery.IE9Gradius.js

Basta includere lo script per ultimo nel tag head e dovrebbe gestire il resto. Vedi note readme


-3
2017-09-14 10:32